Storybook 如何使用 scss ？

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

1. 安装必要的依赖

首先，确保你的项目中已经安装了SCSS相关的依赖。如果没有，你需要安装 sass-loader 和 sass (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来增强你的组件样式。