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 相关文章推荐
javascript操作文本框readOnly
May 15 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
jQuery取id有.的值的方法
May 21 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
js获取url传值的方法
Dec 18 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 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
6种php上传图片重命名的方法实例
2013/11/04 PHP
PHP代码优化的53个细节
2014/03/03 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
php获取excel文件数据
2017/04/21 PHP
popdiv
2006/07/14 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
js跳转页面方法总结
2014/01/29 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
浅谈document.write()输出样式
2015/05/07 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
python使用any判断一个对象是否为空的方法
2014/11/19 Python
python实现在windows下操作word的方法
2015/04/28 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
Python3 修改默认环境的方法
2019/02/16 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
Django ModelForm操作及验证方式
2020/03/30 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
个人借款协议书范本
2014/11/17 职场文书
研究生个人学年总结
2015/02/14 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书