解决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 ...
随机推荐
- 在操作Git Bash时出现的问题
参考博客:https://blog.csdn.net/weixin_44394753/article/details/91410463 1.问题1 $ git remote add origin gi ...
- 版本控制git的简单使用
0.第一次使用时配置: git config --global user.name "your_name" git config --global user.email " ...
- Wireshark的使用(抓包、过滤器)
Wireshark的使用(抓包.过滤器) 听语音 分步阅读 Wireshark这个转包工具的简单实用 工具/原料 Wireshark软件包 方法/步骤 Wireshark是世界上最流行的网络分析工具. ...
- New!一只菜鸟的学习之路....
今天拥有了自己的博客,希望在这里记录下自己成长的点点滴滴! 本博客主要记录: 1.在学习过程中遇到的问题及后续的解决办法: 2.技术上的困难,希望路过的大佬指点一二: 3.分享一些实用的技术材料: 4 ...
- Spring(二):初始值赋值
依赖注入 1.构造器注入 见spring简介最后一大点. 2.Set方式注入 依赖注入:Set注入 依赖:bean对象的创建依赖于容器. 注入:bean对象的所有属性,由容器注入. bean ,里面属 ...
- 03使用Want Weapp进行路由跳转
因为这里使用的是第三方库,所以你要引入哈. 在app.json中引入哈. "usingComponents": { "van-cell": "@van ...
- 百度找不到,但高手都知道(感觉他们都知道)的一个小细节--BUG调试报告
语言 Batch 前言 以前我一直不明白为什么那么多应用程序在读取"文件路径"作为参数时为什么总是在正式的"文件路径"前要加上个"-f".& ...
- zendframewor 项目构建
1.安装好新的php 2.安装composer 在https://getcomposer.org/download/上手动下载最新版本的composer.phar 放到/usr/local/b ...
- PHP中嵌入正则表达式常用的函数
PHP中嵌入正则表达式常用的函数有四个: 1.preg_match() :preg_match() 函数用于进行正则表达式匹配,成功返回 1 ,否则返回 0 . 语法:int preg_match( ...
- git中常用命令的总结
一.git stash 1.git stash 保存当前工作进度,会把暂存区和工作区的改动保存起来.执行完这个命令后,在运行git status命令,就会发现当前是一个干净的工作区,没有任何改动. ...