在Vue中使用Compass的方法


Posted in Javascript onMarch 02, 2018

写作动机

拖了蛮久的,总算下定决心要给自己写一个个人网站,不仅要看起来狂拽酷炫,技术也要OK,所以趁此机会也将自己不熟悉的技术拿来锻炼一下。网站打算用Vue来作为前端框架,Css用Sass来写。但是尚未正式开始就突然想到,既然Sass有Compass这么有力的工具不用岂不是步子迈小了,然而找了一轮发现都是说怎样在Vue项目中使用Sass而没有Compass的解决方案。但是这么放弃一个强大的工具练习不了又不甘心,于是各种继续搜索和尝试后总算是成功在项目中用上了Compass,然后屁颠的就来分享了,如果能帮到有这个需求猿,那也是极好的了。闲话不多说,开始撸代码,最后我会将这个Demo放到GitHub( ̄? ̄)~*

用vue-cli建个项目

vue init webpack compass-demo //撸个烧烤架
npm install normalize.css axios vuex --save//撒上一些调味料
npm install node-sass sass-loader mockjs --save-dev//刷上一些酱汁
npm install compass-mixins --save-dev//把佐料在烧烤架上准备好后放上嫩肉

修改配置

修改build/util.js

...
exports.cssLoaders = function (options) {
 ...
 return {
  ...
  // 将sass和scss修改为如下
  sass: generateLoaders('sass', { indentedSyntax: true, includePaths: [path.resolve(__dirname, '../node_modules/compass-mixins/lib')] }),
  scss: generateLoaders('sass', { includePaths: [path.resolve(__dirname, '../node_modules/compass-mixins/lib')] }),
  ...
 }
}
...

就这么简单

*.sass文件中

在Vue中使用Compass的方法

*.vue文件中

在Vue中使用Compass的方法

愉快的撸吧~

附上Demo GitHub的地址vue-compass

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

Javascript 相关文章推荐
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 Javascript
JavaScript页面加载事件实例讲解
Sep 01 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
JS实现可控制的进度条
Mar 25 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 #Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 #Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 #Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 #Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 #Javascript
vue element-ui table表格滚动加载方法
Mar 02 #Javascript
浅谈React组件之性能优化
Mar 02 #Javascript
You might like
PHP下对字符串的递增运算代码
2010/08/21 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
es6数值的扩展方法
2019/03/11 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
Python 字符串定义
2009/09/25 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
Puppeteer使用示例详解
2019/06/20 Python
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
实习销售业务员自我鉴定
2013/09/21 职场文书
会计专业自荐信
2013/12/02 职场文书
服务员自我评价
2014/01/25 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
行政监察建议书
2014/05/19 职场文书
企业消防安全责任书
2014/07/23 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
入伍通知书
2015/04/23 职场文书
遗嘱格式范本
2015/08/07 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python