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

【问题标题】：How to compile SCSS to CSS and load the CSS code as string into a variable?如何将 SCSS 编译为 CSS 并将 CSS 代码作为字符串加载到变量中？
【发布时间】：2020-03-08 10:39:32
【问题描述】：

我正在使用 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 可以在运行时获取它？

【问题讨论】：

标签： javascript css vue.js webpack sass

【解决方案1】：

乍一看，这里有两个问题，都比较简单。

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

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

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

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

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

【讨论】：

感谢您的反馈！运行时不是一个选项 - 我需要 var 中的 CSS 代码才能将其内联到 iframe 的
您是否尝试过使用原始加载程序但它不起作用？如果没有看到您的特定配置，很难告诉您究竟需要做什么。我建议尝试一下，看看它是否有效/失败，然后在一个新的更具体的问题中发布更多细节。我认为您对在运行时加载文件有点困惑。如果您使用 ajax 读取文件，您将在内存中（在变量中）拥有 css 文件的内容。

【解决方案2】：

我找到了以下解决方案：

安装“raw-loader”加载器
使用以下语句导入 SCSS：

import style from '!raw-loader!sass-loader!./my-styles.scss'

注意：“！”一开始是覆盖默认加载器配置。在我的情况下，Quasar 默认为 SCSS 文件链接“样式加载器”（在头部输出标签），所以在这种情况下我必须禁用它。

现在我在 style 变量中获得了编译后的 CSS 代码。

【讨论】：