Vue 3-在main.js上导入，在Vue.config.js上加载additionalData，加载一个全局scss

Question

我正在尝试使用文件"vue.config.js"；

vue.config.js

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

}

如果在我的App.vue中，我打开带有任何代码的样式标签，比如：

App.vue

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

这是有效的，scs应用于所有页面，但问题是，如果我在App.vue上没有样式标签，样式将不会应用

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

main.js

import './assets/common.scss'

为什么会发生这种情况？它应该这样工作吗？如何使vue.config.js上的配置在不需要样式标签的情况下工作？

Answer 1

我的两美分，希望有人能为完整性添加更多。您在vue.config.js中定义的是vue加载程序在找到<style>标记时的行为，在您将预处理器设置为scs的情况下。如果它没有style标记，它就不会注入任何样式，也不知道在<style lang="scss">中使用哪个预处理器，在其他情况下，如果你在main上有导入，它基本上会被包括在index.html中，它将覆盖里面的每个组件，但更像是在常规的html导入中。

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

参考文献：

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