vue-cli + sass 的正确打开方式图文详解


Posted in Javascript onOctober 27, 2017

关于在vue-cli搭建的项目中怎么配置sass,网上搜到的基本是这种答案:

vue-cli + sass 的正确打开方式图文详解

但是我认为,直接将样式写在每个单文件的<style>里,是十分不明智的做法。且不说node-sass安装过程的各种坑,内嵌的<style>也让组件显得十分混乱。想象一下你在修改某个methods时必须拖动滚轮穿越几十上百行的css代码,又或者为了修改一组样式,却找不到对应的css文件,因为它们散布在vue文件里。。。

在我看来,正确的做法应该是单独管理sass文件,然后在main.js中直接引入编译好的css文件。像iView, ElementUI 都是采用这种做法。

如果你认同并且打算采用这种方式,看下面这个具体的例子:

vue-cli + sass 的正确打开方式图文详解

项目结构如上图,style文件夹下是分门别类的scss文件,方便管理和后期维护。然后在main.scss引入所有的scss样式片段,使用 sass --watch main.scss:main.css 命令监听并将scss文件编译为css文件。最后在main.js中引入main.css文件。这样你就可以直接在元素上添加class,然后在scss中畅快写样式了。

vue-cli + sass 的正确打开方式图文详解

当然我们不希望每次手动输入这些命令,初步想法是通过修改dev命令,:

vue-cli + sass 的正确打开方式图文详解

但是这样并不能达到效果,因为每次只会启动前一个命令。于是考虑到使用批处理来实现:

vue-cli + sass 的正确打开方式图文详解
vue-cli + sass 的正确打开方式图文详解

将这两个.bat放在根目录下,然后配置package.json:

vue-cli + sass 的正确打开方式图文详解

这样就可以使用 npm run dev 一键启动 hot reload 和 sass watch了。

总结

以上所述是小编给大家介绍的vue-cli + sass 的正确打开方式图文详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
bootstrap multiselect下拉列表功能
Aug 22 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 #Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 #Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 #Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 #Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 #Javascript
vue-resource拦截器设置头信息的实例
Oct 27 #Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 #Javascript
You might like
php 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
python匿名函数的使用方法解析
2019/10/10 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
单身旅行者的单身假期:Just You
2018/04/08 全球购物
有模特经验的简历自我评价
2013/09/19 职场文书
公司离职证明范本
2014/10/17 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
求职信格式范文
2015/03/19 职场文书
母亲节主题班会
2015/08/14 职场文书
python 实现的截屏工具
2021/05/08 Python
mysql配置SSL证书登录的实现
2021/09/04 MySQL
解决Oracle数据库用户密码过期
2022/05/11 Oracle