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\_sass-loader@9.0.2@sass-loader\dist\utils.js:274:37)
at Object.loader (C:\Users\pc\Desktop\npm i element-ui -S\element-w\node_modules\_sass-loader@9.0.2@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/_sass-loader@9.0.2@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 sass-loader@7.3.1 --save