乐闻世界logo
搜索文章和话题

How to Import scss file with Storybook

5 个月前提问
3 个月前修改
浏览次数50

1个答案

1

在使用Storybook来构建组件库时,如果你希望在你的组件中使用SCSS样式,需要做一些配置来确保SCSS文件能正确编译。以下是步骤和例子说明如何在Storybook中使用SCSS:

1. 安装必要的依赖

首先,确保你的项目中已经安装了SCSS相关的依赖。如果没有,你需要安装 sass-loadersass (Dart Sass):

bash
npm install --save-dev sass-loader sass

或者使用 yarn:

bash
yarn add --dev sass-loader sass

2. 配置 Storybook

Storybook使用Webpack来构建,所以我们需要对其Webpack配置进行扩展以支持SCSS。在你的 .storybook 目录下,创建或修改 main.js 文件:

javascript
module.exports = { stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', ], webpackFinal: async (config) => { // 添加sass-loader config.module.rules.push({ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], include: path.resolve(__dirname, '../'), }); // 返回新的配置 return config; }, };

这里,我们添加了一个新的规则来处理 .scss 文件。该规则使用 sass-loader, css-loader, 和 style-loader

3. 使用 SCSS 在组件中

一旦配置好了SCSS的支持,你就可以在你的组件中直接使用它。例如,创建一个 Button 组件,并为其添加SCSS样式:

Button.js

javascript
import React from 'react'; import './Button.scss'; const Button = ({ label }) => { return <button className="button">{label}</button>; }; export default Button;

Button.scss

scss
.button { padding: 10px 20px; background-color: blue; color: white; border: none; border-radius: 5px; cursor: pointer; &:hover { background-color: darkblue; } }

4. 创建 Storybook 故事

接下来,在Storybook中为你的 Button 组件创建一个故事:

Button.stories.js

javascript
import React from 'react'; import Button from './Button'; export default { title: 'Example/Button', component: Button, }; const Template = (args) => <Button {...args} />; export const Primary = Template.bind({}); Primary.args = { label: 'Click Me', };

5. 运行 Storybook

现在一切配置完成,运行 Storybook:

bash
npm run storybook

或者如果你使用yarn的话:

bash
yarn storybook

这样,你就可以在Storybook中看到你的组件,并且它会使用你定义的SCSS样式。

通过以上步骤,你可以在Storybook中灵活使用SCSS来增强你的组件样式。

2024年6月29日 12:07 回复

你的答案