构建 Angular 库后无法将 SCSS 与 Storybook 一起使用

Posted 2023-02-19

【中文标题】构建 Angular 库后无法将 SCSS 与 Storybook 一起使用

【英文标题】：Unable to use SCSS with Storybook after building Angular Library

【发布时间】：2019-07-15 12:53:49

【问题描述】：

我正在做一个项目，我们使用 Angular CLI 构建了一个 Angular 库。

我们正在使用 Storybook 来测试组件。我是一个故事书菜鸟，但发现它的设置相对简单。但是，我正在努力让 scss 编译成 css。因此，在测试我的按钮时，它没有呈现正确的 css。

根据 Storybook 文档，我已包含以下文件：

const path = require("path");

module.exports = 
  module: 
    rules: [
      
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"],
        include: path.resolve(__dirname, "../")
      
    ]
  
;

了解更多内容 我正在构建一个 Angular 库，所以这意味着没有应用程序。 为了测试图书馆的组件，我使用了 Storybook 和 SCSS。

以前有人见过这种类型的问题吗？任何帮助将不胜感激。

【参考方案1】：

感谢任何看过这个的人。

我们最终想通了。我们在按钮组件文件中使用了枚举：

最初是这样的：

enum ButtonStyle 
  primary
  

上面代码的问题是它把值 0 分配给了主节点。枚举被故事书渲染为它的 int 值，而不是像 Angular 那样对其进行字符串化。所以 SASS 编译得很好，只是没有编译我们所期望的。

改成这样：

enum ButtonStyle 
  primary = "primary"