Step1、 安装 sass-resources-loader:
- npm install sass-resources-loader
复制代码 Step2、 vue.config.js中修改设置:
- module.exports = { // 其他设置 css: { loaderOptions: { sass: { prependData: ` @import "@/assets/styles/vars.scss"; @import "@/assets/styles/mixins.scss"; @import "@/assets/styles/functions.scss"; ` } } }, chainWebpack: config => { const oneOfsMap = config.module.rule('scss').oneOfs.store oneOfsMap.forEach(item => { item .use('sass-resources-loader') .loader('sass-resources-loader') .options({ // 引入一个全局sass文件 resources: './src/assets/styles/vars.scss', // 引入多个全局sass文件 resources: ['./src/assets/styles/vars.scss', './src/assets/styles/mixins.scss', './src/assets/styles/functions.scss'] }) .end() }) }, // 其他设置}
复制代码 !重要提示:
Do not include anything that will be actually rendered in CSS, because it will be added to every imported Sass file.
全局sass文件中不要包罗任何会被编译成css的代码,因为它们会被应用到每一个sass文件中
来源:https://blog.csdn.net/weixin_43642751/article/details/111994910
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作! |