Javascript 如何将SCS编译为CSS，并将CSS代码作为字符串加载到变量中？

我正在与Vue（实际上是类星体）建立一个SPA，我需要能够：

• 将CSS文件的内容加载到JS变量（或Vue数据）中 属性）在运行时
• 此CSS文件应在构建时生成 从SCSS文件

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

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

• 在预定义的SCSS文件中编写CSS，该文件是我的项目结构的一部分
• 在构建时（或在运行开发时），我希望将此SCS编译成CSS文件
• 然后在运行时，在我的一个Vue组件中，我希望将以前生成的CSS代码作为字符串加载到变量中

这样做的原因是，这个CSS代码随后将被输入到和iframe（通过-ing）中，iframe将用于将样式应用于页面

---

我应该如何配置我的项目和包，以便实现这一点？我已经发现的一件事是，我可能需要使用，但是在构建项目时如何准备CSS文件，以便原始加载程序可以在运行时获取它？

从最初的外观来看，这里有两个问题，这两个问题都相对简单

第一个是在项目构建步骤中需要包含一个scss编译器插件。您使用哪种工具取决于您可能使用的任何现有工具。否则，你可以顺便来看看

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

如果您正在使用webpack，则可以使用链接的原始加载程序，但如果您当前未使用webpack，则可能超出范围

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

---

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

我找到了以下解决方案：

安装“原始加载程序”加载程序

使用以下语句导入SCS：

从“”导入样式！原始装载机！sass加载器/my styles.scss'

注意：开头的“！”用于覆盖默认加载程序配置。在我的例子中，Quasar默认为SCSS文件链接“样式加载器”（在头部输出标记），因此在这种情况下我必须禁用它

---

现在我已经在

样式
变量中编译了CSS代码。
感谢您的反馈！运行时不是一个选项-我需要变量中的CSS代码才能将其内联到iframe中的标记中。是的，我正在使用webpack（我的堆栈是Quasar，它是Vue上的一个框架）。问题是-我知道我需要配置编译/绑定工作流，以便在构建（运行开发）时将SASS文件编译成CSS，然后在运行时将CSS加载到var中。但我的问题仍然存在——我该怎么做？如何配置webpack和加载程序（以及哪些加载程序）？您是否尝试过使用原始加载程序，但它不起作用？没有看到您的特定配置，很难告诉您需要做什么。我建议尝试一下，看看它是否有效/失败，然后在一个新的更具体的问题中发布更多细节。我认为您对在运行时加载文件有点困惑。如果使用ajax读取文件，那么css文件的内容将存储在内存中（在一个变量中）。