@storybook/angular无法加载stories/index.ts中的SCSS文件

我之前也碰到过一模一样的问题，核心原因是Storybook的Webpack配置默认没有覆盖stories目录下的样式文件解析，导致导入的SCSS无法被正确处理。给你几个针对性的解决步骤：

1. 修正.storybook/webpack.config.js配置 #

确保你的Webpack规则明确包含stories目录，并且加载器链完整。修改后的配置应该是这样的：

const path = require('path');

module.exports = async ({ config, mode }) => {
  // 添加SCSS文件解析规则
  config.module.rules.push({
    test: /\.scss$/,
    use: [
      'style-loader', // 将CSS注入DOM
      'css-loader',   // 解析CSS
      'sass-loader'   // 编译SCSS为CSS
    ],
    include: [
      path.resolve(__dirname, '../src'), // 项目源码目录
      path.resolve(__dirname, '../stories') // 关键：加上stories目录
    ]
  });

  return config;
};

重点提醒：别忘顶部导入path模块，不然路径解析会出错。

2. 确认依赖包已安装 #

如果还没装必要的加载器，执行以下命令安装：

npm install --save-dev style-loader css-loader sass-loader sass

（注：现在推荐用sass替代已废弃的node-sass）

3. 检查stories/index.ts中的导入路径 #

确保你导入SCSS的相对路径是正确的，比如：

// 导入项目全局样式
import '../src/styles.scss';

// 或者导入stories目录下的本地样式
import './custom-styles.scss';

4. 重启Storybook服务 #

修改Webpack配置后，必须重启Storybook才能让新配置生效，别直接刷新浏览器哦！

额外排查点 #

如果还是不行，打开Storybook启动的控制台，看是否有具体错误提示：

• 如果提示Module not found，检查导入路径是否拼写错误
• 如果提示loader missing，确认所有依赖包都安装成功
• 如果提示invalid syntax，检查SCSS文件本身是否有语法错误

内容的提问来源于stack exchange，提问作者Gonzalo Pincheira Arancibia