webpack - 如何使 SCSS 模块与 Storybook 和 Gatsby 一起使用

Question

在过去的两天里，我一直在尝试将 Storybook 与我的 Gatsby 应用程序集成，但没有成功。对于造型，我正在使用：

1. 常规 SCSS
2. SCSS 模块
3. 顺风 CSS

现在事情是这样的：我正在使用来自Gatsby Docs的标准配置 并且我修改了这个 cod 来处理 SCSS，如下所示：

const path = require("path")

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-postcss",
  ],
  features: {
    postcss: true,
  },
  webpackFinal: async config => {
    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
    config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]

    // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
    config.module.rules[0].use[0].loader = require.resolve("babel-loader")

    // use @babel/preset-react for JSX and env (instead of staged presets)
    config.module.rules[0].use[0].options.presets = [
      require.resolve("@babel/preset-react"),
      require.resolve("@babel/preset-env"),
    ]

    config.module.rules[0].use[0].options.plugins = [
      // use @babel/plugin-proposal-class-properties for class arrow functions
      require.resolve("@babel/plugin-proposal-class-properties"),
      // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
      require.resolve("babel-plugin-remove-graphql-queries"),
    ]

    // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
    config.resolve.mainFields = ["browser", "module", "main"]

    config.module.rules.push({
      test: /\.scss$/,
      use: ["style-loader", "css-loader?modules=true", "sass-loader"],
      include: path.resolve(__dirname, "../"),
    })

    return config
  },
}

最后，一切都编译并运行，但样式只是部分应用（即在下面的示例中，您可以看到链接获得了它的“onHover”颜色）。

它在网站上的显示方式：

这就是它在故事书中的表现：

使用检查工具，我可以看到对于某些组件，应用了样式（通过类名），并且对于其中一些，它要么将“未定义”指定为类名，要么不指定任何类名：

我已尽力提供易于调试的可重现代码，我在代码沙箱中克隆了一个 gatsby 启动器，但由于某种原因，在我修改文件后它显示 502 错误。所以...如果你知道为什么它显示502以及如何处理它，你可以尝试克服codesandbox中的错误。但是，如果不是，这是我的代码，因此这也是重现错误的一个选项：

https://codesandbox.io/s/so-storybook-issue-2b6cx

编辑：

在浏览了文档之后，我尝试将@storybook/preset-scss插件添加到 main.js，如此处所述

作为回应，我收到以下错误：

ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

@import "../../styles/variables";
^
      Invalid CSS after "i": expected 1 selector or at-rule, was 'import api from "!.'

而且我也不知道如何解决这个问题............尝试了许多提供的解决方案，没有任何效果

（我已尝试删除 node_modules 并重新安装npm ci，但没有任何效果）

标签： webpacksassgatsbystorybook