vue-cli项目报错Invalid CSS after ...load the styles解决方案_loader重复加载

时间: 2018-04-20阅读: 80标签: loader

我们都知道在webpack中使用scss,less之类的东西,需要配置'style-loader', 'css-loader', 'sass-loader'这些,例如:

{
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
  }

但是在vue-cli脚手架创建项目时,会发现报如下错误:



这是因为现在 vue-cli 自带的webpack根本不用自己配置loader,如果自己配置了,都会导致loader重复加载, 我们在在build/utils.js中的exports.cssLoaders中已经返回相关loader了,如下:

sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),


错误解决方案:

1、取消直接添加的相关loader的配置。

2、或者使用自己的配置,注释上面的那两行代码即可;如果使用less,就注释对应关于less的行就行了。