Storybook 组件级 css 文件不工作

Question

我使用 create-react-app 创建了一个 React 应用程序，并添加了一个按钮组件，一个 css 作为按钮。当我为按钮加载故事时，没有为按钮加载样式。在下面粘贴相关文件。是否有我要做的任何配置，以启动它和运行样式？

组件：index.js

 import React, { Component } from 'react';
import styles from './style.css';
class CustomButton extends Component{
    render(){
        return (
            <button className={styles.customButton}>Hello</button>     
        );
    }
}
export default CustomButton;

style.css:

.customButton {
    border: 1px solid red;
    padding: 10px;
    background-color: rgb(223, 19, 19);
}

故事文件：

import React from 'react';
import CustomButton from '../../src/index';
import { storiesOf } from '@storybook/react';


const story = storiesOf("Custom button",module);

story.addWithJSX("simple",() => <CustomButton/>);

系统信息：

Environment Info:

  System:
    OS: Windows 7 6.1.7601
    CPU: (2) x64 Intel(R) Core(TM) i3-2370M CPU @ 2.40GHz
  Binaries:
    Node: 10.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 84.0.4147.125
  npmPackages:
    @storybook/addon-info: ^5.3.19 => 5.3.19
    @storybook/components: ^5.3.19 => 5.3.19
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4
    @storybook/react: ^5.3.19 => 5.3.19

Answer 1

为了 storybook 与 webpack 一起工作，您必须首先在 .storybook 目录下创建文件 main.js。然后添加 style-loader + css-loader 加载器来解析你的 css 导入。请记住，在 css-loader 中启用 modules: true 选项以帮助您导入类:

.storybook\main.js

const path = require('path');

module.exports = {
  webpackFinal: async config => {
    // Remove the existing css rule
    config.module.rules = config.module.rules.filter(
      f => f.test.toString() !== '/\.css$/'
    );

    config.module.rules.push({
      test: /\.css$/,
      use: ['style-loader', {
        loader: 'css-loader',
        options: {
          modules: true, // Enable modules to help you using className
        }
      }],
      include: path.resolve(__dirname, '../src'),
    });

    return config;
  },
};

Answer 2

tmhao2005 的回答很有帮助。但是请注意，这可能会从您的主应用程序复制一些 Webpack 规则配置，如果您决定在将来进行调整或添加其他 CSS 加载程序，事情可能会不同步。例如，如果您决定添加 postcss-loader，您需要记住在 webpack.config.js 和您的 Storybook Webpack 配置中同时将其添加到应用程序的 Webpack 配置中在 .storybook/main.js（提示：你不会记得！）。

这是一个稍微更简洁的调整版本，它告诉 Storybook 重用您应用的 Webpack CSS 规则配置。此版本将与您的主应用程序的 Webpack 规则保持同步：

// .storybook/main.js

// Imports the app's Webpack Config (change this to require() style with older Node.js versions).
import appWebpackConfig from '../webpack.config.js';

const isCSSRule = (rule) => rule.test.toString() === '/\.css$/';

module.exports = {
    ...
    webpackFinal: (config) => {
        // Removes the existing CSS rule.
        config.module.rules = config.module.rules.filter((rule) => !isCSSRule(rule));

        // Tells Storybook to use the same CSS rule config as our app.
        config.module.rules.push(appWebpackConfig.module.rules.find(isCSSRule));

        return config;
    }
    ...
};

我用 Storybook 6.0.21 对此进行了测试，它运行得非常好。

Storybook 组件级 css 文件不工作

Storybook Component-level css file not working

javascript

css

reactjs

webpack

storybook