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