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

Question

我觉得我对此想得太多了，但我找不到我在这个模式中寻找的东西。

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

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'),
            ],
        }
    },
}

我也有app级风格sheet。重置、总体布局等。这些不是我想要拉入每个组件的 SCSS 处理的东西——只是我想要在应用程序的最终 CSS 中输出的东西。

我在查找 "how to add SCSS file to Vue" 时发现的所有内容都是关于组件处理的资源加载器。我不能以这种方式包含全局样式，然后依靠重复数据删除来删除无关的样式 - 导入的全局样式被内置组件范围限定，这会导致膨胀并且通常一个糟糕的模式。

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

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

更新

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

Answer 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 组件也是全局的，除非你指定作用域 scss。

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

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

Add SCSS file to VueJS app, but not each component

vue.js

webpack

sass

webpack-style-loader