webpack配置全局scss

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",