vue-ssr-template icon indicating copy to clipboard operation
vue-ssr-template copied to clipboard

添加sass-loader后build时报错,dev时不报错

Open kevinlvhsl opened this issue 6 years ago • 2 comments

  • 改动 在Home.vue中添加如下代码
<style lang="scss" scoped>
.active {
  background-color: blue;
  width: 300px;
}
</style>

vue-loader-config.js中第8行添加如下代码:

sass: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader!sass-loader' }),
scss: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader!sass-loader' }),

======

  • 错误如下: Module not found: Error: Can't resolve 'scss-loader' in '...projectDir/src/views/home.vue'

  • 疑惑 npm run build:client 和 npm run dev时都不报错 npm run build:server时才会报错

请问这是什么原因?

kevinlvhsl avatar Mar 20 '19 13:03 kevinlvhsl

找到解决问题的方法了。 ** 升级vue-loader ** yarn add [email protected] -D (为了不引起更多的问题,也不要升级到最新的版本,因为当前项目的webpack是3.x) 升级之后再次yarn dev 或 yarn build 或 yarn build:server 都没有问题了

kevinlvhsl avatar Mar 21 '19 02:03 kevinlvhsl

使用全局sass的时候你那边报错吗?我这边能解决dev 的时候全局引用~但是无法解决build的~

loaders = { css: [ 'vue-style-loader', 'css-loader' ], less: [ 'vue-style-loader', 'css-loader', 'less-loader', { loader: 'sass-resources-loader', options: { // 需更改为项目中实际scss文件路径 resources: path.resolve(__dirname, '../static/less/_main.less'), }, }, ], }

webcailan avatar Dec 03 '19 07:12 webcailan