详解Vue 全局引入bass.scss 处理方案


Posted in Javascript onMarch 26, 2018

为解决在Vue组件中全局引入 scss 变量及 mixins ,装载了一个名为 "sass-resources-loader" 解析器。

安装

$ > cnpm i -D sass-resources-loader

配置

配置的话是在 vue 的 loader 解析器中配置,即在 vue-cli 脚手架方式构建出来的文件中是以 build/utils.js,在该文件中定义了 cssLoaders() 方法,该方法定义了诸如 css、less的解析方式,具体如下。

// build/utils.js
exports.cssLoaders = function (options) {
 options = options || {}
 
 ...
 return {
  // ...
  sass: generateLoaders('sass', { indentedSyntax: true }),
  // 定义在这里 =======================》
  scss: generateLoaders('sass').concat(
   {
    loader: 'sass-resources-loader',
    options: {
     resources: path.resolve(__dirname, '../src/common/style/global.scss') // 需要全局引入的文件
    }
   }
  ),
  // 定义在这里 =======================》
  // ...
 }
}

// global.scss
@mixin line-height($height) {
 height: $height;
 line-height: $height;
}
$head-height: .45rem;

// xx.vue
<style lang="scss">
 height: @include line-height(45px);
</style>

建议

在 global.scss 中只需要定义变量 或者是 mixins (混合)。

参考

https://vue-loader.vuejs.org/zh-cn/configurations/pre-processors.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习ExtJS Panel常用方法
Oct 07 Javascript
表格 隔行换色升级版
Nov 07 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
vue2.0实现列表数据增加和删除
Jun 17 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 #Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 #Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 #Javascript
JS从非数组对象转数组的方法小结
Mar 26 #Javascript
深入理解Node module模块
Mar 26 #Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 #Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 #Javascript
You might like
PHP count_chars()函数讲解
2019/02/14 PHP
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
深入理解javascript的getTime()方法
2017/02/16 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
Python选课系统开发程序
2016/09/02 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
python web框架中实现原生分页
2019/09/08 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
Python: glob匹配文件的操作
2020/12/11 Python
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
建筑工程技术应届生自荐信
2013/09/27 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
天网工程实施方案
2014/03/26 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
校园活动策划方案
2014/06/13 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
Python装饰器详细介绍
2022/03/25 Python