未找到带有故事书模块的 CSS 模块

Posted 2023-02-19

【中文标题】未找到带有故事书模块的 CSS 模块

【英文标题】：CSS-modules with storybook module not found

【发布时间】：2019-10-10 21:47:56

【问题描述】：

我已经在我的 react 项目 storybook v5 中安装了。一切似乎都很好，但是当我想将样式导入我的反应组件时（我使用 postcss-modules）我有一个错误Module not found: Error: Can't resolve './styles/Buttons'。 我应该在故事书配置中添加什么以使其可行？我在我的项目中使用了 babel。

【参考方案1】：

您需要通过添加 webpack.config.js 来自定义 Storybook 的 webpack 设置。

例如添加SASS:

// @ webpack.config.js

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = async ( config, mode ) => 
  // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
  // You can change the configuration based on that.
  // 'PRODUCTION' is used when building the static version of storybook.

  // Make whatever fine-grained changes you need
  config.module.rules.push(
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
    include: path.resolve(__dirname, '../'),
  );

  // Return the altered config
  return config;
;

查看docs。