Vue 3 - 在 main.js 上导入 vue.config.js 上的附加数据，加载全局 scss 文件答案

【问题标题】：Vue 3 - import on main.js vs additionalData on vue.config.js, load a global scss fileVue 3 - 在 main.js 上导入 vue.config.js 上的附加数据，加载全局 scss 文件
【发布时间】：2021-06-23 13:27:23
【问题描述】：

我正在尝试使用文件“vue.config.js”加载全局 scss

vue.config.js

module.exports = {
css: {
  loaderOptions: {
    sass: {
      additionalData: `@import "@/assets/common.scss";`
    }
  }
}

}

如果我在我的 App.vue 中打开样式标签，使用任何代码，如下所示：

App.vue

<style lang="scss">
#app{
  display: block;
}
</style>

这可行，scss 应用于所有页面，但问题是，如果我在 App.vue 上没有样式标签，则不会应用样式

如果我在 main.js 上使用 import，我不需要样式标签 no App.vue

main.js

import './assets/common.scss'

为什么会这样？它应该以这种方式工作吗？如何使 vue.config.js 上的配置工作，而不需要样式标签？

【问题讨论】：

标签： javascript css node.js vue.js sass

【解决方案1】：

我的两分钱，希望有人可以添加更多以确保完整性。您在 vue.config.js 中定义的是 vue-loader 在找到 <style> 标记时的行为方式，在您的情况下，您将预处理器设置为 scss。如果它没有样式标签，它将不会注入任何样式，也不知道要使用哪个预处理器，如<style lang="scss">，在另一种情况下，如果您在 main 上有导入，它将基本上包含在 index.html 中将覆盖内部的每个组件，但更像是在常规 html 导入中。

我建议始终使用样式标签，因为它也是 vue 组件常规模板的一部分。

几个参考：

【讨论】：

我对这两种方法的定义有相同的想法，感谢您的建议，我会改变，并且肯定会这样做。