vue-cli3设置scss全局变量

ps:该方法只适用vue-cli3

找到项目更目录下的vue.config.js，若没有创建一个

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // 根据自己样式文件的位置调整
        prependData: `@import "~@/assets/scss/global.scss";`,  //这里不需要增加别名 ～/@相当于src目录
      },
    },
  },
};

或者也可以自己添加别名

const path = require("path");
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src"),
      },
    },
  },
  css: {
    loaderOptions: {
      sass: {
        // 根据自己样式文件的位置调整
        prependData: `@import "@/assets/scss/global.scss";`,  //这里的@是别名
      },
    },
  },
};

配置完相当于所有的组件都会引用这个scss，可以将共用的scss变量和mixin写在李敏啊