在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 相关文章推荐
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 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写出自己的BLOG系统 2
2010/04/12 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
Python获取邮件地址的方法
2015/07/10 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
Python 面试中 8 个必考问题
2018/11/16 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
python使用建议与技巧分享(一)
2020/08/17 Python
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
opencv实现图像平移效果
2021/03/24 Python
好家长事迹材料
2014/01/23 职场文书
动员大会主持词
2014/03/20 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
2014教师年度工作总结
2014/11/10 职场文书
英文导游词
2015/02/13 职场文书
公司管理制度范本
2015/08/03 职场文书
小学运动会入场口号
2015/12/24 职场文书