javascript - 如何将 SCSS 编译为 CSS 并将 CSS 代码作为字符串加载到变量中？

Question

我正在使用 Vue(实际上是 Quasar)构建一个 SPA，我需要能够:

• 将 CSS 文件的内容加载到 JS 变量(或 Vue 数据 属性)在运行时
• 此 CSS 文件应在构建时生成 来自 SCSS 文件

我不想加载预制的 CSS 文件，我希望能够通过 SASS 编写 CSS 代码。 我也不想在运行时从 SCSS 编译 CSS，例如在每次应用加载时。

换句话说，我考虑了以下工作流程:

• 在作为我的元素结构一部分的预定义 SCSS 文件中编写 CSS
• 在构建时(或在运行开发时)我希望将此 SCSS 编译成 CSS 文件
• 然后在运行时，在我的一个 Vue 组件中，我想将之前生成的 CSS 代码作为字符串加载到一个变量中

这样做的原因是此 CSS 代码随后将被馈送到 iframe(通过 postMessage -ing)并且 iframe 将使用 CSSStyleSheet’s insertRule()将样式应用到页面。

我应该如何配置我的元素和包才能实现这一点？我已经发现的一件事是我可能需要使用 raw-loader但是如何在构建元素时准备 CSS 文件，以便 raw-loader 可以在运行时获取它？

Answer 1

乍一看，这里有两个问题，这两个问题都相对简单。

第一个是您需要在元素构建步骤中包含一个 scss 编译器插件。您使用哪一个取决于您可能使用的任何现有工具。否则，您可以直接加入 https://www.npmjs.com/package/node-sass

第二个问题是如何在运行时获取css。你在这里有几个选择。您可以将该文件编译到您的包中，或者您可以在运行时检索它。 运行时将使您的包保持较小并允许您正常提供 css，但这需要服务器来提供它。最初加载时编译时间会更快，但会增加包的大小。

如果您使用的是 webpack，则可以使用您链接的原始加载器，但如果您当前未使用 webpack，则可能超出范围。

您可以通过向您的构建添加一个新步骤来实现这一点，该步骤将 css 转换为字符串文字，这将减少在运行时加载它的需要，但会增加您的捆绑端。

对于在运行时加载，您可以通过 ajax 从 http 服务器轻松检索文件。