详解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 相关文章推荐
JavaScript For Beginners(转载)
Jan 05 Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
中止javascript执行的方法
Feb 14 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
js实现省份下拉菜单效果
Feb 15 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
js实现随机抽奖
Mar 19 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 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
使用python求解二次规划的问题
2020/02/29 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
Python实现简单猜数字游戏
2021/02/03 Python
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
班组长的岗位职责
2013/12/09 职场文书
销售经理工作职责
2014/02/03 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
营业员岗位职责
2015/02/11 职场文书
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python