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 相关文章推荐
js 数据类型转换总结笔记
Jan 17 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
JS 数字转换研究总结
Dec 26 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
Sep 11 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
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
node.js中的console用法总结
2014/12/15 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
微信小程序页面传值实例分析
2017/04/19 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
python实现从字典中删除元素的方法
2015/05/04 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
python中比较两个列表的实例方法
2019/07/04 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
python中有帮助函数吗
2020/06/19 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
html5图片上传预览示例分享
2014/04/14 HTML / CSS
人事部专员岗位职责
2014/03/04 职场文书
自行车广告词大全
2014/03/21 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
倡议书格式及范文
2015/04/29 职场文书
学习十八大的感悟
2015/08/11 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫