vue-cli + sass 的正确打开方式
关于在vue-cli搭建的项目中怎么配置sass,网上搜到的基本是这种答案:
但是我认为,直接将样式写在每个单文件的<style>里,是十分不明智的做法。且不说node-sass安装过程的各种坑,内嵌的<style>也让组件显得十分混乱。想象一下你在修改某个methods时必须拖动滚轮穿越几十上百行的css代码,又或者为了修改一组样式,却找不到对应的css文件,因为它们散布在vue文件里。。。
在我看来,正确的做法应该是单独管理sass文件,然后在main.js中直接引入编译好的css文件。像iView, ElementUI 都是采用这种做法。关于sass的文件结构,推荐这篇博客:管理Sass项目文件结构
如果你认同并且打算采用这种方式,看下面这个具体的例子:
项目结构如上图,style文件夹下是分门别类的scss文件,方便管理和后期维护。然后在main.scss引入所有的scss样式片段,使用 sass --watch main.scss:main.css 命令监听并将scss文件编译为css文件。最后在main.js中引入main.css文件。这样你就可以直接在元素上添加class,然后在scss中畅快写样式了。
当然我们不希望每次手动输入这些命令,初步想法是通过修改dev命令,:
但是这样并不能达到效果,因为每次只会启动前一个命令。于是考虑到使用批处理来实现:
将这两个.bat放在根目录下,然后配置package.json:
这样就可以使用 npm run dev 一键启动 hot reload 和 sass watch了。
vue-cli + sass 的正确打开方式的更多相关文章
- iOS开发小技巧--相机相册的正确打开方式
iOS相机相册的正确打开方式- UIImagePickerController 通过指定sourceType来实现打开相册还是相机 UIImagePickerControllerSourceTypeP ...
- Xcode 的正确打开方式——Debugging(转载)
Xcode 的正确打开方式——Debugging 程序员日常开发中有大量时间都会花费在 debug 上,从事 iOS 开发不可避免地需要使用 Xcode.这篇博客就主要介绍了 Xcode 中几种能 ...
- C#语法——泛型的多种应用 C#语法——await与async的正确打开方式 C#线程安全使用(五) C#语法——元组类型 好好耕耘 redis和memcached的区别
C#语法——泛型的多种应用 本篇文章主要介绍泛型的应用. 泛型是.NET Framework 2.0 版类库就已经提供的语法,主要用于提高代码的可重用性.类型安全性和效率. 泛型的定义 下面定义了 ...
- InnoDB缓冲池预加载在MySQL 5.7中的正确打开方式
InnoDB缓冲池预加载在MySQL 5.7中的正确打开方式 https://mp.weixin.qq.com/s/HGa_90XvC22anabiBF8AbQ 在这篇文章里,我将讨论在MySQL 5 ...
- Console控制台的正确打开方式
Console控制台的正确打开方式 console对象提供了访问浏览器调试模式的信息到控制台 -- Console对象 |-- assert() 如果第一个参数断言为false,则在控制台输出错误信息 ...
- 任务队列和异步接口的正确打开方式(.NET Core版本)
任务队列和异步接口的正确打开方式 什么是异步接口? Asynchronous Operations Certain types of operations might require processi ...
- (一)Redis for Windows正确打开方式
目录 (一)Redis for Windows正确打开方式 (二)Redis for 阿里云公网连接 (三)Redis for StackExchange.Redis 下载地址 官网.中文网1 及 中 ...
- List的remove()方法的三种正确打开方式
转: java编程:List的remove()方法的三种正确打开方式! 2018年08月12日 16:26:13 Aries9986 阅读数 2728更多 分类专栏: leetcode刷题 版权声 ...
- C++11随机数的正确打开方式
C++11随机数的正确打开方式 在C++11之前,现有的随机数函数都存在一个问题:在利用循环多次获取随机数时,如果程序运行过快或者使用了多线程等方法,srand((unsigned)time(null ...
随机推荐
- 201521123110《Java程序设计》第12周学习总结
1. 本周学习总结 2. 书面作业 1. 字符流与文本文件:使用 PrintWriter(写),BufferedReader(读) 1.1 生成的三个学生对象,使用PrintWriter的printl ...
- 万物皆对象的JavaScript
写在前面: 经过前段时间对于H5语言的学习,开始慢慢适应现在的生活节奏和代码语言.从一开始的毫无头绪到现在可以大概地写出部分的网站静态页面,用了两个周的时间.作为一个之前从未接触过计算机语言的初学者来 ...
- Hibernate第五篇【inverse、cascade属性详解】
前言 上一篇博文已经讲解了一对多和多对一之间的关系了,一对多和多对一存在着关联关系(外键与主键的关系).本博文主要讲解Inverse属性.cascade属性.这两个属性对关联关系都有影响 Invers ...
- Spring Security研究(2)-高级web特性
1, 添加 HTTP/HTTPS 信道安全 <http> <intercept-url pattern="/secure/**" access="ROL ...
- 关于搭建php电商环境时缺少fileinfo、数据库安装出错问题解决办法
今天以WSTMart电商系统为例讲解 搭建php电商环境缺少fileinfo.数据库安装出错问题找了很多方法都没能很好解决,该方法简单明了,容易操作 首先需要到开源中国中下载该系统源码,网址为:htt ...
- DI in ASP.NET Core
.NET-Core Series Server in ASP.NET-Core DI in ASP.NET-Core Routing in ASP.NET-Core Error Handling in ...
- 初识oracle存储过程
参见:http://www.cnblogs.com/linjiqin/archive/2011/04/16/2018411.html 1.存储过程的语法结构: CREATE OR REPLACE PR ...
- 进入css3动画世界(一)
其实我做css3动画也没有多久,这篇文章目标人群是css3动画的新手,不喜勿喷. 分类 目前我接触到的css3动画有2类:一种是transition的,另一种是@keyframes的. 两者的区别就是 ...
- myeclipse快捷键(转载)
非常感谢分享这篇文章的大虾..但是我忘了几下您的blog地址,因此无法注明原文地址...见谅哈 存盘 Ctrl+s(肯定知道) 注释代码 Ctrl+/ 取消注释 Ctrl+\(Eclipse3已经都合 ...
- PyTorch教程之Autograd
在PyTorch中,autograd是所有神经网络的核心内容,为Tensor所有操作提供自动求导方法. 它是一个按运行方式定义的框架,这意味着backprop是由代码的运行方式定义的. 一.Varia ...