vue中加入scss踩坑

1、要在vue-li项目中使用scss需要安装这些包(npm i xxx --save-dev)：node-sass@4.9.0、sass-loader@7.1.0

2、在webpack.base.conf.js文件里rules对象加入如下代码：

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

3、下面就可以在单独的vue文件里style标签里写：

<style lang="scss" scoped>
// css
</style>

4、如果需要加入全局scss文件（定义公共参数和方法）

• 需要安装sass-resources-loader@2.1.1

• 需要配置build/utils.js文件里的内容，将scss: generateLoaders('sass') 改成下面的

  scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/assets/global.scss') } }),

5、配置完之后，重新npm run dev

最后就可以自由使用scss了