Storybook 组件级 css 文件不起作用
Posted
技术标签:
【中文标题】Storybook 组件级 css 文件不起作用【英文标题】:Storybook Component-level css file not working 【发布时间】:2020-12-09 09:30:12 【问题描述】:我使用 create-react-app 创建了一个 react 应用,并添加了一个按钮组件,即按钮的 css。当我为按钮加载故事时,不会为按钮加载样式。在下面粘贴相关文件。有什么我需要做的配置来让它启动并运行样式吗?
github repo for the project
组件: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
【问题讨论】:
您目前似乎没有配置 webpack css 文件的main.js
?文件在哪里?
我已经在上面链接了我的 github 存储库。所有这些文件都在那里可用。回购:github.com/akhiltheguitarist/StoryBook
我的意思是文件main.js
位于这个目录下github.com/akhiltheguitarist/StoryBook/tree/master/storybookapp/…
我已将它们添加到 config.js 文件中。故事书正在为我加载。只是css没有应用于我的组件。
为了配置 webpack css,你可能需要放入 main.js 文件。无论如何,我会在答案中告诉你
【参考方案1】:
tmhao2005 的回答很有帮助。但是请注意,这可能会从您的主应用程序中复制一些 Webpack 规则配置,如果您决定在未来进行调整或添加其他 CSS 加载器,事情可能会不同步。例如,如果您决定添加 postcss-loader
,则需要记住将其添加到应用程序的 Webpack 配置中的 webpack.config.js
和您的 Storybook 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 isCs-s-rule = (rule) => rule.test.toString() === '/\\.css$/';
module.exports =
...
webpackFinal: (config) =>
// Removes the existing CSS rule.
config.module.rules = config.module.rules.filter((rule) => !isCs-s-rule(rule));
// Tells Storybook to use the same CSS rule config as our app.
config.module.rules.push(appWebpackConfig.module.rules.find(isCs-s-rule));
return config;
...
;
我使用 Storybook 6.0.21 对此进行了测试,效果非常好。
【讨论】:
【参考方案2】:为了使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;
,
;
【讨论】:
伙计,成功了!非常感谢。以前我确实尝试过使用 main.js 和 css-loader,但我不知道我必须删除现有的 css 规则。非常感谢。 谢谢,我也必须过滤掉 css 规则。他们应该在他们的文档中突出显示这一点,我不希望我需要删除他们自己的 css 规则,如果他们有 css 规则,我希望导入 css 可以开箱即用!以上是关于Storybook 组件级 css 文件不起作用的主要内容,如果未能解决你的问题,请参考以下文章