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

Question

我正在开展一个元素，我们使用 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。

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

Answer 1

感谢看过这篇文章的任何人。

我们最终弄明白了。我们在按钮组件文件中使用了枚举:

最初是这样的:

enum ButtonStyle {
  primary
  
}

上述代码的问题在于它正在将 0 值分配给 primary。枚举被故事书渲染为它的 int 值，而不是像 angular 那样将其字符串化。所以 SASS 编译得很好，只是没有编译出我们所期望的。

改成这样:

enum ButtonStyle {
  primary = "primary"
  
}