将 SCSS 文件添加到 VueJS 应用程序，但不是每个组件答案

【问题标题】：Add SCSS file to VueJS app, but not each component将 SCSS 文件添加到 VueJS 应用程序，但不是每个组件
【发布时间】：2019-11-01 14:00:57
【问题描述】：

我觉得我在这方面想得太多，但我无法在这种模式中找到我想要的东西。

我有一个包含多个组件的 VueJS 应用程序，并且一切正常。我正在使用 style-resources-loader 将我的全局变量和 mixins 等引入到每个组件中。这按预期工作。

module.exports = {
    pluginOptions: {
       'style-resources-loader': {
            preProcessor: 'scss',
            patterns: [
              path.resolve(__dirname, './src/styles/variables.scss'),
              path.resolve(__dirname, './src/styles/text-mixins.scss'),
              path.resolve(__dirname, './src/styles/interactive-mixins.scss'),
            ],
        }
    },
}

我还有一个应用级样式表。重置、一般布局等。这些不是我想要拉入每个组件的 SCSS 处理的东西 - 只是我想要在应用程序的最终 CSS 中输出的东西。

我在寻找“如何将 SCSS 文件添加到 Vue”时发现的一切都是关于组件处理的资源加载器。我不能以这种方式包含全局样式，然后依靠重复数据删除来删除无关的样式 - 导入的全局样式由内置组件范围限定，这会导致膨胀并且通常是不好的模式。

如果可以避免的话，我也不希望将单独的 Webpack 构建和 CSS 文件作为最终产品。

我可以把它放在根级 App 样式块中，但这不是使用页面级 CSS 的好地方。将这组 SCSS 文件与组件分开是理想的，但它是 Vue App 的 SCSS 编译的一部分。

更新

这里有一大块东西，不知道它是如何进入那种状态的，但现在情况并非如此，我无法重新创建它。

【问题讨论】：

仅供参考，我的构建中只有 style-loader、sass-loader 和 css-loader。 style-resource-loader 的既定目的是为了注入变量和 mixin。我不确定为什么要为您注入引导程序...您能粘贴如何在组件中加载 1 个 scss 吗？
@blackening style-resources-loader 在顶部块中，先将 scss 加载到组件中，然后再编译单文件组件中的 scss。你问的是这个吗？你是对的。全局包含文件不会让组件访问 scss，但 style-resources-loader 会。
嗯，我只是要求一个组件中的 scss 的 sn-p。
@blackening 没什么特别的。但我现在无法重现这个问题，我认为还有其他问题。对于这种情况，您的原始答案是正确的。

标签： vue.js webpack sass webpack-style-loader

【解决方案1】：

将它们放入您的入口点。从字面上看，在开头包含 scss。在你的 app.ts 或 app.js 中像这样：

import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css' <-- like this

Vue.use(Buefy)

如果你的 webpack 设置正确，例如Vue cli，那么它并不关心scss是如何找到的。它只会在全球范围内注入它。 Vue 组件也是全局的，除非你指定了 scoped scss。

来自https://buefy.org/documentation/start/的示例

【讨论】：