如何在Nx React项目中创建全局样式表共享SCSS变量

有两种常用实现方式，不需要写长相对路径就能直接使用全局SCSS变量： #

方案1：全局自动注入（完全不需要写导入语句） #

直接配置构建工具，把全局变量文件自动注入到所有SCSS文件的编译上下文，你直接在任意组件SCSS里写变量名即可生效。

如果你使用Webpack构建（Nx React默认配置） #

1. 如果你还没有全局Webpack配置，执行命令生成：nx g @nx/webpack:webpack-config
2. 打开根目录webpack.config.js，找到scss-loader的配置段，添加如下配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                // 把工作区根目录加入SCSS解析路径，可直接识别libs/开头的路径
                includePaths: [__dirname],
              },
              // 自动在所有SCSS文件头部注入导入语句
              additionalData: `@use "libs/shared/styles/global.scss" as *;`,
            },
          },
        ],
      },
    ],
  },
};

如果你使用Vite构建 #

打开根目录vite.config.ts，添加如下配置：

import { defineConfig } from 'vite';
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        includePaths: [__dirname],
        additionalData: `@use "libs/shared/styles/global.scss" as *;`,
      },
    },
  },
});

方案2：简化导入路径（不需要写多层相对路径） #

如果你不想全局注入，只想简化导入写法，可以只配置includePaths，之后在任意SCSS文件里只需要写一行短路径导入即可：

// 不需要写../../../这类相对路径
@use 'libs/shared/styles/global.scss' as *;

注意事项 #

如果你的global.scss里包含了全局生效的样式规则（不是变量、mixin、函数这类纯声明内容），建议拆分文件：

• 新建libs/shared/styles/variables.scss，专门存放变量、mixin、函数
• 把variables.scss配置到自动注入规则里
• 全局样式规则只在应用根组件的SCSS里导入一次即可，避免打包后出现重复的全局样式

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