在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 相关文章推荐
jQuery实战之品牌展示列表效果
Apr 10 Javascript
Javascript call和apply区别及使用方法
Nov 14 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
vue实现简单loading进度条
Jun 06 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 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
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
为数据添加append,remove功能
2006/10/03 Javascript
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
input的focus方法使用
2010/03/13 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
Python实现翻转数组功能示例
2018/01/12 Python
基于Python List的赋值方法
2018/06/23 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
Python 串口读写的实现方法
2019/06/12 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
播音主持专业个人自我评价
2014/01/09 职场文书
元旦晚会邀请函
2014/01/27 职场文书
高中生期末评语
2014/01/28 职场文书
小学生评语集锦
2014/04/18 职场文书
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android
Nginx跨域问题解析与解决
2022/08/05 Servers