Nx React Storybook引入全局Sass变量报错求助

问题回顾 #

在Nx React项目的Storybook中，尝试引入顶层node_modules/xx/css下的全局样式变量时，先后遇到两个问题：

• 直接在preview.js用相对路径导入时，提示模块找不到
• 在main.js配置webpack别名和sass-loader的additionalData后，出现Sass语法错误

正确配置方案 #

方案1：直接在preview.js导入（最简方式） #

webpack会自动解析node_modules路径，无需写相对路径，直接通过包名导入目标样式文件即可：

// .storybook/preview.js
// 替换为实际包名和文件路径
import 'xx/css/xx/xx.scss';
import 'xx/css/xx/another-vars.scss';

方案2：全局注入变量（无需手动@import即可使用） #

如果需要在所有组件、story的scss代码中直接使用变量，可修改main.js的webpack配置，核心注意以下两点：

1. 别名路径要对应到node_modules中的目标目录
2. 复用Nx已有的scss规则，避免重复配置导致冲突

修改后的main.js示例：

const rootMain = require('../../../.storybook/main');
const path = require('path');

module.exports = {
  ...rootMain,
  core: { ...rootMain.core, builder: 'webpack5' },
  stories: [
    ...rootMain.stories,
    '../../xx/lib/**/*.stories.mdx',
    '../../xx/lib/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
  webpackFinal: async (config, { configType }) => {
    // 配置别名，指向node_modules中的css目录
    config.resolve.alias = {
      ...config.resolve.alias,
      // 注意：根据你的.storybook目录位置调整相对路径
      '@css': path.resolve(__dirname, '../../node_modules/xx/css')
    };

    // 找到Nx默认配置的scss规则，修改sass-loader的全局注入
    const scssRule = config.module.rules.find(rule => rule.test?.test('.scss'));
    if (scssRule) {
      const sassLoader = scssRule.use.find(loader => loader.loader?.includes('sass-loader'));
      if (sassLoader) {
        sassLoader.options = {
          ...sassLoader.options,
          additionalData: `
            @import "@css/xx/xx/xx.scss";
            @import "@css/xx/xx/xx.scss";
          `
        };
      }
    }

    return config;
  }
};

之前的错误原因：

1. 手动新增scss规则与Nx默认配置冲突，导致Sass解析报错
2. additionalData中使用了HTML转义的"，应替换为正常单/双引号

验证配置 #

1. 重启Storybook服务
2. 在任意story或组件中使用全局样式变量，确认是否生效
3. 若仍有路径问题，检查path.resolve(__dirname, ...)中的相对路径是否匹配你的项目结构

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