Angular+Storybook加载带LESS样式组件时出现cssText未定义错误

Angular + NG-Zorro + Storybook 集成 LESS 时出现 cssText is undefined 错误 #

项目搭建流程 #

• Angular 16：执行 ng new myApp --style less --strict
• 添加 NG-Zorro：执行 ng add ng-zorro-antd
• 添加 Storybook：执行 npx storybook init
• 按 Storybook 官方 LESS 指南（使用 addon-styling）配置 LESS 支持
• 为 NG-Zorro 配置自定义 Webpack 浏览器构建器
• 在 .storybook/preview.ts 中导入 Angular 主 LESS 文件（import '../src/styles.less';，可选操作）
• 在 Storybook 的 main.ts 中导入相同的 webpack 配置作为 webpackFinal
• 添加带 LESS 样式的 Angular 组件
• 为该组件创建 Story

错误现象 #

组件在 Angular 应用中可正常渲染，但在 Storybook 中打开时抛出错误：

Unhandled Promise rejection: cssText is undefined ; Zone: ; Task: Promise.then ; Value: TypeError: cssText is undefined

已尝试无效操作：

• 不在预览中加载 NG-Zorro 样式表
• 使用绝对/相对路径导入样式
• 将样式集中到单个文件

怀疑编译后的 LESS 样式未被 Storybook 正确加载，寻求解决方案。

相关配置代码 #

Storybook main.ts 代码片段

import custom from '../extra-webpack.config.js';
// ...
webpackFinal: async (config) => {
    return {
        ...config,
        module: {
            ...config.module,
            rules: [
                ...(config.module?.rules ?? []),
                ...custom.module.rules,
            ],
        },
    };
},

extra-webpack.config.js 文件内容

module.exports = {
    module: {
        rules: [
            {
                test: /\.less$/,
                loader: 'less-loader',
                options: {
                    lessOptions: {
                        javascriptEnabled: true,
                    },
                },
            },
        ],
    },
};

解决方案 #

方案1：调整 Webpack 规则顺序避免冲突 #

Storybook 自带的样式处理规则可能和自定义 less-loader 规则冲突，需将自定义规则前置，或过滤掉现有同类型规则：

webpackFinal: async (config) => {
    // 过滤掉现有处理 .less 的规则
    const filteredRules = config.module.rules.filter(rule => 
        !(rule.test instanceof RegExp && rule.test.test('.less'))
    );
    
    return {
        ...config,
        module: {
            ...config.module,
            rules: [
                ...custom.module.rules, // 自定义规则放前面
                ...filteredRules,
            ],
        },
    };
},

方案2：使用 Addon Styling 官方配置替代自定义 Webpack 规则 #

利用已安装的 @storybook/addon-styling 直接配置 LESS 支持，无需额外自定义配置：

1. 确保 @storybook/addon-styling 已正确安装
2. 修改 .storybook/main.ts：

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

const config: StorybookConfig = {
  // ... 其他原有配置
  addons: [
    // ... 其他已添加的 addons
    {
      name: '@storybook/addon-styling',
      options: {
        less: {
          lessOptions: {
            javascriptEnabled: true, // 适配 NG-Zorro 需求
          },
        },
      },
    },
  ],
};

export default config;

之后删除 extra-webpack.config.js 以及 main.ts 中导入该文件的代码。

方案3：补全样式加载链 #

单独的 less-loader 仅负责编译 LESS 为 CSS，需配合 style-loader 和 css-loader 完成样式注入：
修改 extra-webpack.config.js：

module.exports = {
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    'style-loader', // 将编译后的 CSS 注入 DOM
                    'css-loader',   // 解析 CSS 依赖
                    {
                        loader: 'less-loader',
                        options: {
                            lessOptions: {
                                javascriptEnabled: true,
                            },
                        },
                    },
                ],
            },
        ],
    },
};

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