vue项目中使用cass/scss

首先需要安装node-sass、sass-loader、style-loader

  npm install node-sass sass-loader style-loader -S-D

安装好sass插件后，找到build/webpack.base.conf.js,在module下的rules后追加下面的代码。

{
    test: /\.sass$/,
    loaders: ['style', 'css', 'sass']
 }

这个时候单独页面使用scss没问题，如果出现报错，请查看是否是版本问题，如果是版本问题，对相应的插件升版或者降版就可以了。
但是想配置单独的scss配置或者跨页面使用就不得行了。这个时候就需要安装sass-resources-loader了，并且需要修改build/utils.js。

npm install sass-resources-loader --save

function generateSassResourceLoader () {
    var loaders = [
        cssLoader,
        'sass-loader',
        {
            loader: 'sass-resources-loader',
            options: {
                resources: [
                    path.resolve(__dirname, 'scss配置文件路由'),
                ]
            }
        }
    ]
    if (options.extract) {
        return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader'
        })
    } else {
        return ['vue-style-loader'].concat(loaders)
    }
  }

//改
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
//为
sass: generateSassResourceLoader(),
scss: generateSassResourceLoader(),

如果单独配置scss配置文件，则需要在main.js中引入配置的scss文件即可，也可单独页面引入。