在使用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文件编译过慢、卡顿问题的更多相关文章

  1. 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题

    2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...

  2. 解决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 ...

  3. 在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 ...

  4. vue cli3.0打包

    1.vue cli3.0需要在项目根目录下配置webpack  包括反向代理以及打包文件路径 const webpack = require("webpack"); module. ...

  5. vue cli3.0 结合echarts3.0和地图的使用方法

    echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...

  6. 使用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 ...

  7. vue cli3.0 封装组件全局引入js文件并发布到npm

    首先用 vue create创建一个项目 当前的项目目录是这样的: 首先需要创建一个 packages 目录,用来存放组件 然后将 src 目录改为 examples 用作示例 二.修改配置 启动项目 ...

  8. vue cli3.0快速搭建项目详解(强烈推荐)

    这篇文章主要介绍下vue-cli3.0项目搭建,项目结构和配置等整理一下,分享给大家. 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cl ...

  9. vue cli3.0使用svg全过程

    VUE-cli3使用 svg-sprite-loader svg-sprite-loader 的插件,用来根据导入的 svg 文件自动生成 symbol 标签并插入 html 1.安装依赖 npm i ...

随机推荐

  1. 《Three.js 入门指南》3.0 - 代码构建的最基本结构。

    3.0 代码构建的最基本结构 说明: 我们必需首先知道,Three.js 的一些入门级概念: 我们需要知道,OpenGL 是一套三维实现的标准,为什么说是标准,因为它是跨平台,跨语言的.甚至CAD以及 ...

  2. centos8系统下docker安装jenkins

    前提是已经安装好docker 1.下载jenkins(最新版本) docker pull jenkins/jenkins 2.创建用于存放jenkins的文件夹 mkdir /home/var/jen ...

  3. JVM系列十(虚拟机性能监控神器 - BTrace).

    BTrace 是什么? BTrace 是一个动态安全的 Java 追踪工具,它通过向运行中的 Java 程序植入字节码文件,来对运行中的 Java 程序热更新,方便的获取程序运行时的数据信息,并且,保 ...

  4. Go语言笔记(1)变量的定义与赋值

    变量的定义与赋值 在go笔记系列开始之前,我强烈建议大家使用Goland的IDM,配合vscode使用真的非常亲民. 1.go程序基本结构 首先,是go程序的基本结构,主要有package引入包.im ...

  5. Flask 和Django

    软件系统发展到今天已经很复杂了,在服务端软件,设计的知识很广泛,为了降低开发难度,提高开发效率,在某些方面去使用别人成熟的框架. 一些事务处理,安全性,数据流控制等都可以让框架处理,而开发人员把更多的 ...

  6. 搭建单区域DNS服务器

                                                          搭建单区域DNS服务器 案例1:搭建单区域DNS服务器 案例2:特殊DNS解析 案例3:配置 ...

  7. 路由与交换,cisco路由器配置,基础知识点(二)

    1.进退用户/特权/全局模式 (1)从用户模式进入特权模式 enable (2)从特权模式进入全局配置模式 configure terminal (3)从其他模式回到特权模式 end (4)从特权模式 ...

  8. C语言数据结构栈

    #include<stdio.h>#include<stdlib.h>typedef struct Node{ int data; struct Node* pnext;}no ...

  9. python3(十七) nonameFunc

    L = list(map(lambda x: x * x, [1, 2, 3, 4, 5, 6, 7, 8, 9])) print(L) # [1, 4, 9, 16, 25, 36, 49, 64, ...

  10. Mysql中的分库分表

    mysql中的分库分表分库:减少并发问题分表:降低了分布式事务分表 1.垂直分表 把其中的不常用的基础信息提取出来,放到一个表中通过id进行关联.降低表的大小来控制性能,但是这种方式没有解决高数据量带 ...