什么是 @storybook/preset-scss？
@storybook/preset-scss 是一个前端开发用来增强 Storybook 的插件，它提供了一种快速使用 SCSS（Sass） 的方式。通过 @storybook/preset-scss，你可以在 Storybook 中，一键生成全局样式，并且全局样式会自动导入每个 story 中。
安装 @storybook/preset-scss
首先，要使用 @storybook/preset-scss，你需要先安装 Storybook，然后再安装这个插件。
安装 Storybook
如果你还没有安装 Storybook，可以执行以下命令来安装：
--- -- -------------- -- ---- ------ ---
以上命令是一个初始化 Storybook 的命令，它会在你的项目中创建 .storybook 目录，并且生成默认的 Storybook 配置文件。
安装 @storybook/preset-scss
安装 @storybook/preset-scss 的方式非常简单，只需要执行以下命令：
--- ------- ---------- ----------------------
或者
---- --- ----- ----------------------
使用 @storybook/preset-scss
安装完成后，就可以开始使用了。在你的 .storybook/main.js 中，需要添加如下配置：
-------------- - -
-------- ----------------------------------
------- -
-------------------------
------------------------------
------------------------ -- ----
--
--如果你已经配置了 addons，只需添加 @storybook/preset-scss 即可。
在上述配置完成后，我们就可以使用 SCSS 了。
新建一个 SCSS 文件
在项目根目录下，新建一个 global.scss 文件（文件名可以自定义），用于存放全局样式。在 global.scss 文件中，你可以定义所有的全局样式。
----- ---- - ------- -- -------- -- -
以上给出的一个简单的示例，实际使用中可以根据项目需求定义更多的样式。
导入全局样式
在 .storybook/preview.js 中，我们需要导入 global.scss 文件。
------ ----------------- -- ----
现在，你可以启动 Storybook 并查看全局样式是否已经生效了。
--- --- ---------
总结
通过 @storybook/preset-scss，我们可以快速使用 SCSS（Sass），并将全局样式自动导入每个 story 中。这个插件极大地提高了我们开发 Storybook 和维护全局样式的效率。在实际开发中，我们可以根据项目需求来添加更多的样式和插件，以提高开发体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedb285b5cbfe1ea061117a