使用 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因为importCSS 单词无效。

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