在vue-cli 3中给stylus、sass样式传入共享的全局变量


Posted in Javascript onAugust 12, 2019

在vue-cli 3中, 给stylus、sass样式传入共享的全局变量

在开发中有时,我们定义了大量的基础样式变量,例如:

在vue-cli 3中给stylus、sass样式传入共享的全局变量

大量的vue单文件组件会用到这些变量,每个组件都引人一次又太麻烦。全局引入是个不错的方法,于是,在main.js 中引入variable.styl文件,但是你会发现,并不起作用。

在查阅了vue cli官方文档后发现,有官方支持的方法。

1、给sass样式传入共享的全局变量

有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使用 vue.config.js 中的  css.loaderOptions 选项。比如你可以这样向所有 Sass 样式传入共享的全局变量:

// vue.config.js
module.exports = {
 css: {
  loaderOptions: {
   // 给 sass-loader 传递选项
   sass: {
    // @/ 是 src/ 的别名
    // 所以这里假设你有 `src/variables.scss` 这个文件
    data: `@import "~@/variables.scss";`
   }
  }
 }
}

2、给stylus样式传入共享的全局变量

// vue.config.js 文件
module.exports = {
 css: {
  loaderOptions: {
   // 给 stylus-loader 传递选项
   stylus: {
    import: '~@/common/stylus/color.styl'
   }
  }
 }
}

总结

以上所述是小编给大家介绍的在vue-cli 3中给stylus、sass样式传入共享的全局变量,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JSON无限折叠菜单编写实例
Dec 16 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 #Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 #Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 #Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 #Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 #Javascript
Angular8基础应用之表单及其验证
Aug 11 #Javascript
浅谈javascript错误处理
Aug 11 #Javascript
You might like
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
PHP脚本数据库功能详解(上)
2006/10/09 PHP
php除数取整示例
2014/04/24 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
Ext 表单布局实例代码
2009/04/30 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
python shell根据ip获取主机名代码示例
2017/11/25 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
Python实现中值滤波去噪方式
2019/12/18 Python
Python 使用office365邮箱的示例
2020/10/29 Python
彻底解决Python包下载慢问题
2020/11/15 Python
有原因的手表:Flex Watches
2019/03/23 全球购物
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
2019年.net常见面试问题
2012/02/12 面试题
汽车检测与维修专业求职信
2013/10/30 职场文书
庆祝教师节活动方案
2014/01/31 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
怎样写辞职信
2015/02/27 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题
Python实现日志实时监测的示例详解
2022/04/06 Python