Angular Storybook样式导入失败：无法找到目标样式表

环境信息 #

• @angular/cli: 18.2.0
• @storybook/angular: 8.2.9

问题描述 #

组件库内共享样式存于library/src/styles，已在ng-package.json的styleIncludePaths配置该路径，组件中通过@use "palette" as palette;导入样式，ng build可正常构建。但按照Storybook文档在angular.json的Storybook构建配置中添加styles路径"library/src/styles"后，运行npm run storybook --debug-webpack仍报错找不到要导入的样式表；修改为不存在的路径会提示找不到文件，说明路径正确但样式无法被识别。

问题原因 #

Storybook的Angular构建器处理样式路径的逻辑和Angular CLI的styleIncludePaths不一样。你在angular.json里加的是全局样式文件路径，而@use导入需要的是Sass解析时的搜索路径，两者不是一回事。

解决方案 #

1. 配置Storybook的Webpack Sass搜索路径 #

创建或修改.storybook/main.ts，通过webpackFinal给sass-loader添加includePaths：

import type { StorybookConfig } from '@storybook/angular';

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: {
    name: '@storybook/angular',
    options: {},
  },
  webpackFinal: async (config) => {
    // 遍历webpack规则，找到处理scss/sass的loader
    config.module?.rules?.forEach(rule => {
      if (rule.test?.test('.scss') || rule.test?.test('.sass')) {
        // 定位到sass-loader配置
        const sassLoader = (rule.use as any[]).find(loader => 
          loader.loader?.includes('sass-loader')
        );
        if (sassLoader) {
          // 添加共享样式路径到sass的includePaths
          sassLoader.options = {
            ...sassLoader.options,
            sassOptions: {
              ...sassLoader.options?.sassOptions,
              includePaths: [
                ...(sassLoader.options?.sassOptions?.includePaths || []),
                './library/src/styles'
              ]
            }
          };
        }
      }
    });
    return config;
  },
};

export default config;

2. 清理无效配置 #

删除angular.json中Storybook配置里的"library/src/styles"全局样式项，因为这不是你需要的配置。

3. 重新启动Storybook #

运行以下命令验证：

npm run storybook --debug-webpack

额外排查点 #

• 确认palette.scss确实存在于library/src/styles目录下，没有拼写错误
• 组件中的@use语句不要加.scss后缀，Sass会自动识别
• 如果用的是CSS变量而非Sass变量，需要在.storybook/preview.ts中手动导入全局样式：

  import '../library/src/styles/palette.scss';
  

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