需求描述
在vue中引入全局css可以直接在html页面引入.css文件,但sass/scss必须被解析成css才能真正引入到页面,因此必须在vue.config.js中配置全局的.sass/.scss文件
vue3配置全局sass/scss
根据vue-cli官网最新的关于css.loaderOptions的配置文档:
尝试了网络上许多教程没有出来,关键就是这个配置项名称:additionalData;可能当你看到时,官网文档已不再是这个字段。。如果配置无效了,请点击参考文档的第一条到官网查阅最新配置信息,一切以官网为准!
// vue.config.js
module.exports = {
css: {
loaderOptions: {
scss: { // 如果配置为"additionalData"无效,请到官网查阅最新配置信息
additionalData: `
@import "~@/assets/放在assets目录下你的.sass/.scss文件1";
@import "~@/assets/放在assets目录下你的.sass/.scss文件2";
`
}
}
}
};
其他
vue配置html网页显示的title:htmlWebpackPlugin.options.title
参考文档
[1] vue-cli:css.loaderOptions
[2] vue-cli:修改插件选项
[3] scss基础使用