Storybook+Angular引入全局Sass样式表报SassError: expected "{"错误如何解决

问题根因 #

你遇到的报错核心原因是在preview.js中使用内联loader前缀引入SCSS文件，导致sass-loader错误解析了非Sass格式的JS代码。
你添加的!style-loader!css-loader!sass-loader!内联前缀会强制webpack按你指定的loader顺序处理文件，当项目（尤其是Angular项目）已经在webpack全局配置/Storybook预设中配置过Sass编译规则时，就会出现loader重复执行的问题：经过前置loader处理生成的JS代码会被再次传给sass-loader解析，Sass无法识别JS的import语法，因此抛出expected "{"的错误。

解决方案 #

按以下步骤调整即可：

• 第一步：修改.storybook/preview.js中的样式引入逻辑，删除内联loader前缀，直接引入SCSS文件即可：

  // 替换之前带loader前缀的引入行
  import './scss-loader.scss'
  

• 第二步：检查.storybook/main.js中的webpackFinal配置：
  如果你使用的是Angular版Storybook，框架预设已经内置了Sass编译支持，不需要额外配置sass-loader相关规则，可以删除自行添加的Sass loader配置避免冲突。
  如果是其他框架的项目，确保Sass相关loader的匹配规则只作用于.scss/.sass后缀的文件，没有重复配置。
• 第三步：校验全局样式的引入路径
  确认scss-loader.scss中引入_theme.scss等全局样式文件的相对路径正确，没有拼写错误。
• 第四步：清理缓存后重启Storybook
  删除node_modules/.cache目录，执行启动命令时添加--no-cache参数，避免旧缓存影响配置生效。

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