使用 Storybook webpack 5 导入 CSS 模块时出错

Question

我正在将 Storybook 与 webpack 5 一起用于一个简单的项目，尽管为 Storybook 自定义了 webpack 配置，但我在 CSS 模块导入方面遇到了挑战。

(2:7) src/stories/header.css Unknown word

  1 | 
> 2 |       import API from "!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../node_modules/style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../node_modules/style-loader/dist/runtime/insertBySelector.js";

    at processResult (./node_modules/webpack/lib/NormalModule.js:743:19)
    at ./node_modules/webpack/lib/NormalModule.js:844:5
    at ./node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at ./node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (./node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (./node_modules/@storybook/builder-webpack5/node_modules/css-loader/dist/index.js:155:5)
    at runNextTicks (node:internal/process/task_queues:61:5)
    at processImmediate (node:internal/timers:437:9)
ModuleBuildError: Module build failed (from ./node_modules/@storybook/builder-webpack5/node_modules/css-loader/dist/cjs.js):
CssSyntaxError

我的 main.js 文件如下所示

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
  },
  webpackFinal: async (config, { configType }) => {
    const path = require('path');

    config.module.rules.push({
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
      include: path.resolve(__dirname, '../src'),
    });
    return config;};
  },
};

Answer 1

我遇到了完全相同的错误，这是由于意外使用

@nrwl/react/plugins/storybook

两次而导致的，这导致了重复的 webpack 加载器规则，所以我猜测

framework: '@storybook/react'

已经为

.css

文件设置了加载器，然后您正在添加您的这里有自己的装载机

config.module.rules.push({
  test: /\.css$/,
  use: ['style-loader', 'css-loader'],
  include: path.resolve(__dirname, '../src'),
});

首先使用

css-loader

，然后是

style-loader

，然后它被传递到

@storybook/react

框架已经存在的规则，该框架再次使用

css-loader

，但此加载程序的输入是

 的输出style-loader

来自你的规则。您实际上可以在错误中看到这一点

(2:7) src/stories/header.css Unknown word

  1 | 
> 2 |       import API from "!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../node_modules/style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../node_modules/style-loader/dist/runtime/insertBySelector.js";

因为

css-loader

需要 CSS 文件，但

style-loader

输出 JS 文件，因此它会抛出错误

Unknown word

因为

import

是无效的 CSS 单词。

因此，要解决您的问题，您可能需要删除 CSS 文件的自定义规则，因为它已经包含在规则中。

Answer 2

如果您使用带有 webpack 5 的 Storybook 7，一个更简单的解决方案是查看 Styling-Webpack 插件，它将为您配置带有 CSS 模块的 Storybook。