webpack - 我可以将 CSS 模块与 Storybook 5(React 风格)一起使用吗？

Question

我正在尝试在我的项目中使用 Storybook v5.0，并且我正在使用 React + Webpack4 + CSS Modules。 (我没有使用 CreateReactApp)

我的设置非常简单，我可以在没有 CSS 模块的情况下设置 Storybook。

但是，如果我尝试编辑自定义故事书 webpack 配置以支持 CSS 模块，则会出错。

当我运行 npm run storybook我得到的错误是:

ERROR in ./src/components/Test/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??postcss!./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js??ref--9-1!./node_modules/postcss-loader/src!./src/components/Test/index.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(2:1) Unknown word

  1 |
> 2 | var content = require("!!../../../node_modules/css-loader/dist/cjs.js??ref--9-1!../../../node_modules/postcss-loader/src/index.js!./index.css");
    | ^
  3 |
  4 | if(typeof content === 'string') content = [[module.id, content, '']];

在我的 package.json :

"@storybook/addon-actions": "^5.0.0",
"@storybook/addons": "^5.0.0",
"@storybook/react": "^5.0.0",

我的 .storybook/webpack.config.js按照他们网站上的示例进行操作，如下所示:

const path = require("path");

const stylesLoaders = [
  "style-loader",
  {
    loader: "css-loader",
    options: {
      modules: true,
      localIdentName: "[path]__[local]--[hash:base64:5]"
    }
  },
  "postcss-loader"
];

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        loaders: stylesLoaders,
        include: path.resolve(__dirname, "../")
      }
    ]
  }
};

任何帮助将不胜感激，因为我想使用最新版本的 Storybook!

Answer 1

这对我有用:

// ./.storybook/main.js
module.exports = {
  //
  webpackFinal: (config, {configType}) => {
    const path  = require('path');

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

和
重命名我的 CSS来自 <filename>.css 的文件至 <filename>.module.css .
祝你好运...