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

Question

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

vue.config.js

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

}

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

应用程序.vue

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

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

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

main.js

import './assets/common.scss'

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

Answer 1

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

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

几个参考：

• https://vue-loader.vuejs.org/guide/pre-processors.html#sass
• https://github.com/webpack-contrib/sass-loader