webpack配置全局scss
效果：a.vue使用index.scss中定义的$mainWidth就无需 @import "xxxxxxx/index.scss"文件
src/assets/styles/index.scss
$mainWidth: 1280px;
$red: red
src/views/a.vue
.aaa {
color: $red;
}
vue.config.js
module.exports = {
configureWebpack: {
resolve: {
alias: {
'@': resolve('src'),
component: path.resolve(__dirname, './src/components'),
outDic: path.resolve(__dirname, './'),
} // 路径别名
},
},
css: {
loaderOptions: {
sass: {
prependData: `@import "./src/assets/styles/index.scss";` // todo 文件路径替换成自己的
}
} // 全局样式文件
}
}
node v14.21.3
webpack 5.24.2
webpack-cli 4.5.0
@vue/cli 4.5.12
"node-sass": "^4.14.1",
"sass-loader": "^8.0.0",
