如何在Angular中为所有SCSS文件动态添加@import语句

针对你遇到的「JSON转SCSS变量工具会覆盖手动添加的@import语句」问题，给你几个适合大量SCSS文件场景的实用方案：

1. 主入口文件统一导入（最省心的基础方案） #

不用在每个组件文件里写@import，而是新建一个全局入口SCSS文件（比如main.scss），先导入所有全局变量文件，再批量导入组件SCSS文件。编译时只需要处理这个入口文件即可。

示例代码：

// main.scss
// 先导入全局变量文件
@import "colors.scss";
@import "typography.scss";

// 批量导入所有组件文件（如果构建工具支持通配符，比如Webpack/Vite）
@import "components/**/*.scss";

这样所有组件文件里不需要手动写变量导入语句，JSON更新时只会修改变量文件本身，不会影响组件文件，变量会全局生效。

2. 利用构建工具自动注入变量文件 #

如果你的项目用Webpack、Vite这类构建工具，可以配置预处理器自动把全局变量文件注入到每个SCSS文件顶部，完全不用手动写@import。

Webpack配置示例 #

修改webpack.config.js中的sass-loader配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              // 自动注入变量文件，注意路径要和项目结构匹配
              additionalData: `@import "./src/styles/colors.scss"; @import "./src/styles/typography.scss";`,
            }
          }
        ]
      }
    ]
  }
};

Vite配置示例 #

修改vite.config.js中的CSS预处理器配置：

export default {
  css: {
    preprocessorOptions: {
      scss: {
        // 自动注入变量文件
        additionalData: `@import "./src/styles/colors.scss"; @import "./src/styles/typography.scss";`
      }
    }
  }
}

配置完成后，每个SCSS文件在编译时都会自动加上这两行导入，完全避免手动编写被覆盖的问题。

3. 拆分自动生成与手动维护的变量文件 #

如果必须保留组件内的导入逻辑，可以把变量文件拆成「自动生成」和「手动维护」两部分：

• 让JSON转SCSS工具只生成纯变量文件（比如_colors-generated.scss），不覆盖其他文件
• 手动创建一个colors.scss，导入自动生成的文件，还可以添加自定义扩展：

// colors.scss（手动维护，不会被工具覆盖）
@import "_colors-generated.scss";
// 这里可以加自定义变量、混合宏等内容

之后所有组件都导入这个手动维护的colors.scss，工具更新时只会修改_colors-generated.scss，不会影响组件里的导入语句。

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