在Vue中自动化导入公共scss样式

背景

在使用Vue-CLI的时候，自动化引入scss公共样式

• 版本说明
  • Vue版本 "vue": "^2.6.11"
  • Vue-CLI版本 "@vue/cli-service": "~4.5.0",

配置

    // vue.config.js
    // 配置处理公共样式
    function addStyleResource(rule) {
      rule.use('style-resource')
        .loader('style-resources-loader')
        .options({
          patterns: [
            path.resolve(__dirname, './src/styles/imports.scss'), // 公共样式位置
          ],
        })
    }
    chainWebpack: config => {
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
        types.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type)));
      },

使用

    // common.scss
    $color: #f00;

    <style lang="scss" scoped>
      .test {
        color: $color;
        font-size: 40px;
      }
    </style>