如何配置Vue用@use规则自动向scss文件与SFC导入全局样式

解决方案：使用sass-loader原生配置实现全场景自动注入@use #

你遇到的两个问题根源分别是：

1. 最初的css.loaderOptions.scss.prependData配置默认已经会应用到所有经过sass-loader处理的文件（包括SFC的style块和独立.scss文件），如果独立文件不生效，大概率是sass-loader版本的配置键名有误，或者路径别名解析的问题
2. style-resources-loader的默认逻辑是直接注入目标文件的内容，而非注入@use语句，会导致你手写的@use规则前出现了普通样式规则，触发sass语法报错

操作步骤 #

1. 先卸载不需要的style-resources-loader：

npm uninstall style-resources-loader
# 或 yarn remove style-resources-loader

2. 修改vue.config.js配置：

// vue.config.js
const path = require('path')

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        // sass-loader v10+ 用 additionalData，v9及以前版本替换为 prependData
        additionalData: `
          @use "@/global/styles/_Colors.scss" as Colors;
          @use "@/global/styles/_Mixins.scss" as Mixins;
        `
      }
    }
  },
  // 确保sass能识别@别名，已配置过可省略
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
}

兼容方案 #

如果以上配置没有生效，可以用链式配置手动给所有类型的scss规则注入代码：

// vue.config.js
const path = require('path')

module.exports = {
  chainWebpack: config => {
    // 匹配所有scss相关规则
    const scssRules = ['vue-modules', 'vue', 'normal-modules', 'normal']
    scssRules.forEach(type => {
      config.module.rule('scss')
        .oneOf(type)
        .use('sass-loader')
        .tap(options => {
          options.additionalData = `
            @use "@/global/styles/_Colors.scss" as Colors;
            @use "@/global/styles/_Mixins.scss" as Mixins;
          `
          return options
        })
    })
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
}

配置效果说明 #

这个配置会给所有被sass-loader处理的文件（包括SFC的<style lang="scss">块、独立的.scss文件）的最开头自动注入两行@use语句：

• SFC的style块里可以直接用Colors.$primary，不需要手动导入
• 独立的.scss文件也可以直接用Colors.$primary，不需要手动导入
• 你在SFC的style块开头写@use "./ComponentStyles"不会报错，因为注入的@use属于合法的开头规则，和你手写的@use可以顺序共存，不会触发语法错误

注意事项 #

• 全局scss文件（比如_Colors.scss、_Mixins.scss）不要写任何实际输出的样式（比如body { margin: 0 }），否则每个文件都会重复插入这段样式，导致打包体积变大，全局公共样式建议单独在main.js里导入
• 如果出现别名解析失败的情况，可以把@换成~@，或者直接写入绝对路径
• as Colors是自定义命名空间，你也可以用as *取消命名空间，直接用$primary访问变量

内容的提问来源于stack exchange，提问作者M2K