How to add SASS support to storybook

Storybook 是一个非常流行的开源工具，它被用来构建和设计UI组件的沙盒环境。它支持多种技术栈，包括React, Vue, Angular等等，并且可以集成多种样式语言，包括SASS。

如何在Storybook中支持SASS：

安装依赖：要在Storybook中使用SASS，首先需要确保已经安装了sass的预处理器。通常，这可以通过npm或yarn来安装。例如：
```
bash
npm install --save-dev sass-loader sass
```
或者
```
bash
yarn add --dev sass-loader sass
```
sass-loader 是webpack的一个loader，用于将SASS文件编译成CSS，而 sass 是实际的SASS预处理器库。

配置webpack: Storybook 允许你自定义webpack的配置。为了整合SASS，你需要在Storybook的配置文件中（通常是 .storybook/main.js）添加对.scss 文件的处理规则。

例如：

javascript
module.exports = {
  webpackFinal: async (config, { configType }) => {
    // 添加对SASS的支持
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    return config;
  },
};

这段代码告诉webpack在遇到 .scss 文件时，使用 sass-loader，css-loader 和 style-loader 来处理它们。

使用SASS: 一旦配置完成，你就可以在你的组件中直接使用 .scss 文件了。例如：

javascript
import './Button.scss';

export default function Button({ label }) {
  return <button className="btn">{label}</button>;
}

并在 Button.scss 中定义样式：

scss
.btn {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  border-radius: 5px;

  &:hover {
    background-color: darkblue;
  }
}

示例用途：

在实际的项目中，使用SASS可以极大地提高样式代码的可维护性和可复用性。例如，在一个大型项目中，你可以使用SASS的变量和混合（mixins）来统一UI组件的样式。通过Storybook，你可以快速地查看这些组件在不同状态下的样式，并确保它们按预期工作。

总的来说，Storybook对SASS的支持使得开发者可以更加高效地构建和测试复杂的UI组件，同时保持代码的整洁和一致性。

2024年6月29日 12:07 回复

1个答案

如何在Storybook中支持SASS：

示例用途：

你的答案