vue-cli 3 全局引入scss变量

一、安装sass-resources-loaderjavascript

npm install sass-resources-loader -S

二、在根路径下（package.json同级）新建vue.config.js（若是已经存在，则不用新建）css

vue.config.jsvue

module.exports = {
  chainWebpack: config => {
    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach(item => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          // Provide path to the file with resources
          resources: './src/assets/mixins.scss',

          // Or array of paths
          // resources: ['./path/to/vars.scss', './path/to/mixins.scss']
        })
        .end()
    })
  }
}

在src/assets目录下新建mixins.scssjava

$theme-color: #d1274e;

@mixin border {
    border-radius: 3px;
    border: 1px solid #ededed;
}

在页面中使用$theme-colornpm

<style lang="scss" scoped>
    #nav {
        color: $theme-color;
    }
</style>

npm run serve重启服务验证成功json