npm包 @storybook/preset-scss 使用教程

什么是 @storybook/preset-scss？

@storybook/preset-scss 是一个前端开发用来增强 Storybook 的插件，它提供了一种快速使用 SCSS（Sass） 的方式。通过 @storybook/preset-scss，你可以在 Storybook 中，一键生成全局样式，并且全局样式会自动导入每个 story 中。

安装 @storybook/preset-scss

首先，要使用 @storybook/preset-scss，你需要先安装 Storybook，然后再安装这个插件。

安装 Storybook

如果你还没有安装 Storybook，可以执行以下命令来安装：

npx -p @storybook/cli sb init --type vue

以上命令是一个初始化 Storybook 的命令，它会在你的项目中创建 .storybook 目录，并且生成默认的 Storybook 配置文件。

安装 @storybook/preset-scss

安装 @storybook/preset-scss 的方式非常简单，只需要执行以下命令：

npm install --save-dev @storybook/preset-scss

或者

yarn add --dev @storybook/preset-scss

使用 @storybook/preset-scss

安装完成后，就可以开始使用了。在你的 .storybook/main.js 中，需要添加如下配置：

module.exports = {
  stories: ['../src/**/*.stories.@(ts|mdx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-scss' // 添加此行
  ],
};

如果你已经配置了 addons，只需添加 @storybook/preset-scss 即可。

在上述配置完成后，我们就可以使用 SCSS 了。

新建一个 SCSS 文件

在项目根目录下，新建一个 global.scss 文件（文件名可以自定义），用于存放全局样式。在 global.scss 文件中，你可以定义所有的全局样式。

html, body {
  margin: 0;
  padding: 0;
}

以上给出的一个简单的示例，实际使用中可以根据项目需求定义更多的样式。

导入全局样式

在 .storybook/preview.js 中，我们需要导入 global.scss 文件。

import '../global.scss'; // 添加此行

现在，你可以启动 Storybook 并查看全局样式是否已经生效了。

npm run storybook

总结

通过 @storybook/preset-scss，我们可以快速使用 SCSS（Sass），并将全局样式自动导入每个 story 中。这个插件极大地提高了我们开发 Storybook 和维护全局样式的效率。在实际开发中，我们可以根据项目需求来添加更多的样式和插件，以提高开发体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb285b5cbfe1ea061117a