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 继承实现例子
Aug 12 Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
Mar 31 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 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写的采集程序
2007/03/16 PHP
分享PHP守护进程类
2015/12/30 PHP
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
js的回调函数详解
2015/01/05 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
Python实现发送email的几种常用方法
2014/08/18 Python
Python常用的日期时间处理方法示例
2015/02/08 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
Python对象与引用的介绍
2019/01/24 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
Python try except else使用详解
2021/01/12 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
Hibernate持久层技术
2013/12/16 面试题
消防安全汇报材料
2014/02/08 职场文书
租房协议书怎么写
2014/04/10 职场文书
宣传普通话标语
2014/06/27 职场文书
项目申请汇报材料
2014/08/16 职场文书
联谊活动总结
2014/08/28 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
2015年教育实习工作总结
2015/04/24 职场文书