Nx 12+Angular 12环境下Storybook引入全局样式失败求助

我之前在Nx 12工作区开发Angular组件并搭配Storybook时，也碰到过完全一样的错误！这个问题的核心是Angular 13及更早版本中，Storybook默认的webpack loader配置会和Angular的SCSS处理逻辑冲突，导致把style-loader的runtime代码当成Sass语法去解析，所以才会抛出SassError: expected "{"的错误。

下面是我亲测有效的解决步骤：

1. 修改Storybook的main.js配置 #

找到你项目里的.storybook/main.js文件，添加webpackFinal配置来覆盖默认的SCSS loader规则：

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal: async (config) => {
    // 移除Storybook默认的SCSS loader规则，避免和Angular的处理逻辑冲突
    config.module.rules = config.module.rules.filter(
      rule => !(rule.test && rule.test.test('.scss'))
    );

    // 添加适配Angular的SCSS loader配置
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            sassOptions: {
              // 这里替换成你的全局SCSS文件所在目录，比如src/styles
              includePaths: [path.resolve(__dirname, '../src/styles')]
            }
          }
        }
      ],
      include: path.resolve(__dirname, '../src')
    });

    return config;
  }
};

2. 正确引入全局SCSS #

在.storybook/preview.js文件里，直接引入你的全局SCSS文件即可：

// 替换成你的全局SCSS实际路径
import '../src/styles/global.scss';

3. 重启Storybook服务 #

修改完配置后，一定要完全关闭当前的Storybook服务，再重新启动，确保新的webpack配置生效。

额外注意事项 #

• 如果你是Nx monorepo结构，.storybook目录可能在某个子项目下，这时候要调整path.resolve里的路径，比如用../../src/styles来定位到全局样式目录
• 确保你的sass-loader、css-loader、style-loader版本和当前Nx/Angular版本兼容，避免出现版本冲突问题

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