解决Vue-cli3.0下scss文件编译过慢、卡顿问题
在使用Vue-cli 3.0构建的项目中,可能存在项目编译过慢的问题,具体表现在编译时会在某一进度比如40%时停顿,等好一会儿才能够编译完成。这使得浏览器中的实时预览也会卡顿,不利于我们快速查看效果,大大降低了我们的开发速度,即便是只修改了一个字。
经本人测试,容易导致该问题的一种常见原因是:
scss文件的嵌套导致。
解决方案是:
在main.js文件中分别引入多个scss样式文件,避免将多个scss文件合并后引入。
举例:
我们把reset.scss、custom.scss、variable.scss三个样式文件使用@import语句引入了app.scss,最后在main.js中引入了app.scss。
这时出现编译卡顿情况,可以改为:
在main.js中使用三条import语句分别引入reset.scss、custom.scss、variable.scss三个样式文件。
另外:本人推测,修改vue-cli3.0的loader配置,有可能也能解决问题。若各位有更好的方法,欢迎指出。
解决Vue-cli3.0下scss文件编译过慢、卡顿问题的更多相关文章
- 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题
2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...
- 解决vue/cli3.0 语法验证规则 ESLint: Expected indentation of 2 spaces but found 4. (indent)
当你使用vue/cli3.0的时,有可能出现雁阵规则 ESLint: Expected indentation of 2 spaces but found 4. (indent) 解决方法 1.在vu ...
- 在CUDA8.0下指定位置编译安装OpenCV3.1.0来实现GPU加速(Compiling OpenCV3.1.0 with CUDA8.0 support)
在CUDA8.0下指定位置编译安装OpenCV3.1.0 一.本人电脑配置:ubuntu 14.04, NVIDIA GTX1060. 二.编译OpenCV3.1.0前,读者需要成功安装CUDA8.0 ...
- vue cli3.0打包
1.vue cli3.0需要在项目根目录下配置webpack 包括反向代理以及打包文件路径 const webpack = require("webpack"); module. ...
- vue cli3.0 结合echarts3.0和地图的使用方法
echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...
- 使用VUE CLI3.0搭建项目vue2+scss+element简易版
1.安装Vue CLI 3 //三选一即可cnpm install -g @vue/cli npm install -g @vue/cli yarn global add @vue/cli 注意: 1 ...
- vue cli3.0 封装组件全局引入js文件并发布到npm
首先用 vue create创建一个项目 当前的项目目录是这样的: 首先需要创建一个 packages 目录,用来存放组件 然后将 src 目录改为 examples 用作示例 二.修改配置 启动项目 ...
- vue cli3.0快速搭建项目详解(强烈推荐)
这篇文章主要介绍下vue-cli3.0项目搭建,项目结构和配置等整理一下,分享给大家. 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cl ...
- vue cli3.0使用svg全过程
VUE-cli3使用 svg-sprite-loader svg-sprite-loader 的插件,用来根据导入的 svg 文件自动生成 symbol 标签并插入 html 1.安装依赖 npm i ...
随机推荐
- Func 和 Action 委托
有了泛型委托,就有了一能适用于任何返回类型和任意参数(类型和合理的个数)的通用委托,Func 和 Action.如下所示(下面的in表示参数,out表示返回结果): delegate TResult ...
- 计算机人推荐书目&网站(不断更新)
计算机人推荐书目&网站(不断更新) 鉴于最近有很多同学问我学什么读什么书好,我把我自己的经历和愚见写下来,仅供参考.我只会写我亲自读过有感悟的书,而不会搬运一些我碰都没有碰过只闻大名的书.本人 ...
- Linux网络安全篇,进入SELinux的世界(四)
SELinux的策略与规则管理set 1.安装SELInux工具 yum install setools-console 2.基本的命令 seinfo [-Atrub] -A ===> 列出SE ...
- Array(数组)对象-->indexOf() 方法
1.定义和用法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置,即下标. 如果没有找到匹配的字符串则返回 -1. 语法: string.indexOf(searchvalue ...
- 原生js俄罗斯方块
效果图 方块定位原理通过16宫格定位坐标,把坐标存到数组中去 [ [[2,0],[2,1],[2,2],[1,2]],//L [[1,1],[2,1],[2,2],[2,3]], //左L [[2,0 ...
- 搞搞hibernate.current_session_context_class
搞搞hibernate.current_session_context_class 分类: 排错记录2010-09-01 18:14 4155人阅读 评论(3) 收藏 举报 sessionhibern ...
- Python爬取抖音高颜值小视频
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 有趣的python PS:如有需要Python学习资料的小伙伴可以加 ...
- Java匹马行天下之JavaSE核心技术——异常处理
Java匹马行天下之JavaSE核心技术——异常处理 异常的简介 在Java中,异常就是Java在编译.运行或运行过程中出现的错误. 程序错误分为三种:编译错误.运行时错误和逻辑错误 编译错误是因为程 ...
- redis 分布式锁的 5个坑,真是又大又深
引言 最近项目上线的频率颇高,连着几天加班熬夜,身体有点吃不消精神也有些萎靡,无奈业务方催的紧,工期就在眼前只能硬着头皮上了.脑子浑浑噩噩的时候,写的就不能叫代码,可以直接叫做Bug.我就熬夜写了一个 ...
- C# 序列化之二进制
序列化:又称串行化,是.NET运行时环境用来支持用户定义类型的流化的机制.其目的是以某种存储形成使自定义对象持久化,或者将这种对象从一个地方传输到另一个地方. 一般有三种方式:1.是使用BinaryF ...