将已编译的 sass 作为字符串导入 vue答案

【问题标题】：import compiled sass as string in vue将已编译的 sass 作为字符串导入 vue
【发布时间】：2020-06-05 21:02:28
【问题描述】：

我正在尝试在 vue（和 vuex）中构建一个简单的邮件编辑器。一旦从某些输入中编辑了所有内容，我想使用 juice 将一些 scss 文件内联到生成的 html 中。如果我尝试使用 webpack raw-loader 导入一个 css，

import css from '!raw-loader!./../assets/sass/test.css';

然后我可以将 css 值传递给果汁

let result=juice.inlineContent(html,css)

然后在我的一个组件中注入 v-html（见下文）以呈现电子邮件。 Whitout 使用 raw-loader，css 将被应用到所有东西，被导入。

如果我尝试将 raw-loader 与 scss 文件一起使用，它不会正确编译。

import css from '!raw-loader!./../assets/sass/main.scss';

我对 vue 和 webpack 还是很陌生，所以，有什么我可以挖掘的东西/某个地方来了解一种预处理 scss 文件然后将其作为字符串传递给 vue 的方法，而不是将其作为 vue 中的样式应用?

我还尝试将一些 css 限定为我使用 v-html 标记的组件（以及内联 html 的位置）

<template>
  <div v-html="render" />
</template>
<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["render"]),
  },
};
</script>

<style lang="scss" scoped>
table {
  border: 1px solid red;
}
</style>

起初在值（getter）中没有表，但是当我将它添加到组件（使用编辑器）时，它根本没有呈现样式，就好像组件没有重新呈现一样。这就是我决定在注入 DOM 之前内联 css 的原因，而不是在某些操作之后执行它 - 例如单击按钮。

我也尝试过使用 >>> 但没有运气。我知道这不是主要问题，只是一个“支线任务”，但我只是在学习

【问题讨论】：

标签： vue.js webpack sass vuejs2

【解决方案1】：

import css from '!raw-loader!sass-loader!./../assets/sass/main.scss';

它首先编译 sass，然后将其作为行字符串导入...easy peasy

【讨论】：