在 Storybook 中将 scss 作为文本导入答案

【问题标题】：Import scss as text in Storybook在 Storybook 中将 scss 作为文本导入
【发布时间】：2023-02-10 23:23:34
【问题描述】：

我正在使用 typescript 和 scss 设置一个 webcomponents 库（普通的，不使用 lit 或任何其他库），构建是使用 esBuild 完成的。

我拆分了 webcomponents 以使用单独的 html 和 scss 文件：

import css from "./Alert.scss";
import html from "./Alert.html";

const componentTemplate = document.createElement("template");
componentTemplate.innerHTML = `<style>${JSON.stringify(css)}</style>${html}`;

这在构建和使用时工作正常：

plugins: [sassPlugin({type: "css-text"})],

我的 scss 被编译并作为文本字符串注入模板中。

但是......我无法在我的故事书中使用它。我正在使用带有 preset-scss 插件的标准配置并使用 webpack 5。

查看输出时，undefined 被注入为 css。

关于如何让它在 SB 中运行的任何想法？只想将 scss 作为 css 字符串导入。

【问题讨论】：

标签： sass storybook custom-element

【解决方案1】：

我不确定如何使用 Webpack 执行此操作以及问题是什么，但您可以查看 raw-loader for WebPack 或使用 asset/source for WebPack 5。

另一个解决方案可能是检查我创建的 csshtml-module package，它编译成原生 JavaScript 模块。您或许可以设置您的 IDE 以自动将这些文件编译成原生 JS/TS 模块。

因为这些成为本机模块，所以它们应该适用于大多数库和框架。有一些关于如何在 PHPStorm 和 VSCode 中设置它的指南。

【讨论】：