请选择 进入手机版 | 继续访问电脑版

vuecli3 使用 sass-resources-loader 引入sass全局变量

[复制链接]
轩峰毅飞 发表于 2021-1-1 18:35:20 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
Step1、 安装 sass-resources-loader:
  1. npm install sass-resources-loader
复制代码
Step2、 vue.config.js中修改设置:
  1. 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
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )