在使用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. python基础-深浅拷贝

    深拷贝与浅拷贝 总结: # 浅拷贝:list dict: 嵌套的可变数据类型是同一个 # 深拷贝:list dict: 嵌套的不可变数据类型彼此独立 浅拷贝 # 个人理解: # 在内存中重新创建一个空 ...

  2. Python中判断输入字符串是否为数字的方法

    在写物理实验图像处理的脚本时,遇到了一个判断输入的字符串是否为数字的方法 最开始我的思路是这个 test = input() while test.isdigit(): # do something ...

  3. postfix基础邮件服务

                                                              postfix基础邮件服务  案例1:postfix基础邮件服务 1.1 问题 本例 ...

  4. Linux服务器架设篇,DNS服务器(三),正反解区域的配置

    一.大体架构 DNS服务器其实只有一个"真正"的配置文件,即 /etc/named.conf .其他的配置文件都是依据此配置展开的.每个域都需要两个配置文件,即正解文件和反解文件. ...

  5. 用robotframework 标准库String解决由于存在千分位分隔符导致两个数值不相等的问题。

    在编写robotframework自动化断言的过程中,我遇到了如下问题: 我想写一个两个金额判断是否相等的断言,其中一个金额是展示字段存在千分位分隔符,另一个金额是input带入字段,没有千分位分隔符 ...

  6. 科技发展时间线(Technology Timeline)

    本文主要记录,过去两百年间,科技发展的时间线 这些内容,是自己在学习电脑发展历史的时候做的, 感兴趣的同学,可以复制到 Excel 里面,按顺序逐一进行学习, 学习和整理的过程确实花了很长时间,但是并 ...

  7. web.page.regexp用法(全网唯一)

    前言 因为这个东西“web.page.regexp”,差点把自己杀了.一点都不夸张,这将近30度的天气,办公室不开空调,又要闷,还要带着口罩,躁动的很.加上这个鬼东西“web.page.regexp” ...

  8. AJ学IOS(55)多线程网络之图片下载框架之SDWebImage

    AJ分享,必须精品 效果: 代码: - (NSArray *)apps { if (!_apps) { NSArray *dictArray = [NSArray arrayWithContentsO ...

  9. Vue中el-form标签中的自定义el-select下拉框标签

    页面写死el-select下拉框标签: 通过v-for="item in stateArr"绑定,stateArr声明在Vue组件里面的data参数里面代码如下: <el-f ...

  10. delphi使用ADO在sql数据库存取图片的方法

    我一直不认为能把代码写的和天书一样的程序员是好的程序员,那不过是因为我真的对delphi也就是略懂皮毛,太深了看不懂.网上查询数据库存取图片的方式,看的是一头雾水,有人提出保存路径使用时再调用,方法很 ...