vue 使用 scss

1.安装sass 依赖包  终端输入

npm  install sass-loader --save-dev

npm install node-sass --sava-dev

2.build文件夹下的webpack.base.conf.js的rules里面添加配置

{

  test: /\.scss$/,

  loaders: ['style', 'css', 'sass']

}

3.使用scss时候在所在的style样式标签上添加lang=”scss”即可 

4.scss使用

<style lang="scss">

$color:red;

.home{

  div {color:$color;}

}

</style>

可能会出现的问题

Module build failed: TypeError: loaderContext.getResolve is not a function
    at getWebpackImporter (C:\Users\pc\Desktop\npm i element-ui -S\element-w\node_modules\[email protected]@sass-loader\dist\utils.js:274:37)
    at Object.loader (C:\Users\pc\Desktop\npm i element-ui -S\element-w\node_modules\[email protected]@sass-loader\dist\index.js:42:61)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!./node_modules/[email protected]@sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/HelloWorld.vue 4:14-394 13:3-17:5 14:22-402
 @ ./src/components/HelloWorld.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8082 webpack/hot/dev-server ./src/main.js

​

 这个就是sass-loader版本过高  只需要降低版本即可

卸载sass-loader ： npm uninstall sass-loader

安装指定版本： npm install [email protected] --save