vue sass在组件内局部定义变量生效 全局文件内定义变量不生效

依赖版本

"node-sass": "^4.12.0",
"postcss-pxtorem": "^5.1.1",
"sass-loader": "^8.0.2",
"style-loader": "^2.0.0",

这四个依赖的版本我能跑起来且样式生效 可以参考一哈

新建vue.config.js文件
添加配置

const path = require("path");

function resolve(dir) {
  return path.resolve(__dirname, dir);
}

module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      // 全局引入sass公共样式
      sass: {
        prependData: `@import '~@/assets/style/common.scss';`,
      },
    },
  },
  chainWebpack: (config) => {
    config.resolve.alias.set("@", resolve("src"));
  },
  publicPath: "./",
};

注

旧版本sass 用data: @import "@/assets/css/mixin.scss";

新版本sass 用prependData: @import "@/assets/css/mixin.scss";

否则报错：options has an unknown property ‘data’.