在使用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. PTA数据结构与算法题目集(中文) 7-40奥运排行榜 (25 分)

    PTA数据结构与算法题目集(中文)  7-40奥运排行榜 (25 分) 7-40 奥运排行榜 (25 分)   每年奥运会各大媒体都会公布一个排行榜,但是细心的读者发现,不同国家的排行榜略有不同.比如 ...

  2. Java内存可见性volatile

    概述 JMM规范指出,每一个线程都有自己的工作内存(working memory),当变量的值发生变化时,先更新自己的工作内存,然后再拷贝到主存(main memory),这样其他线程就能读取到更新后 ...

  3. Array(数组)对象-->lastIndexOf() 方法

    1.定义和用法 lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,如果指定第二个参数 start,则在一个字符串中的指定位置从后向前搜索. 语法: string.lastInde ...

  4. python-从酷狗下载爬取自己想要的音乐-可以直接拿来体验哟

    因为最近发现咪咕音乐版权好多,当时我就在想是不是可以爬取下来,然后花了一些时间,发现有加密,虽然找到了接口,但是只能手动下载VIP歌曲,对于我们学IT的人来说,这是不能忍的,于是就懒得去解密抓取了,但 ...

  5. SpringBoot系列(六)集成thymeleaf详解版

    SpringBoot系列(六)集成thymeleaf详解版 1. thymeleaf简介  1. Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎.  2. Thymeleaf ...

  6. AJ学IOS(16)UI之XIB自定义Cell实现团购UI

    AJ分享,必须精品 先看效果图 自定义Cell 本次主要是自定义Cell的学习 实现自定义Cell主要有三种方法:按照使用的频繁度排序: XIB > 纯代码 > StoryBoard XI ...

  7. bfs和dfs辨析—基础复习(从stack和queue的角度来理解区别,加深理解,不再模糊)

    参考: https://www.cnblogs.com/Tovi/articles/6194815.html https://blog.csdn.net/dangzhangjing97/article ...

  8. 【Java】【常用类】Object 基类 源码学习

    源码总览: 有好些都是native本地方法,背后是C++写的 没有关于构造器的描述,默认编译器提供的无参构造 https://blog.csdn.net/dmw412724/article/detai ...

  9. [译]使用开发工具来调试 Beta 版 WebView

    自2014年以来,Android WebView 已经作为一个可更新的系统组件铺平了道路,为 Android 应用程序和用户提供了稳定性和性能改进.现代网络平台功能和安全补丁. 然而,更新可能是一把双 ...

  10. Leetcode1353-最多可以参加的会议数目

    题目描述: 给你一个数组 events,其中 events[i] = [startDayi, endDayi] ,表示会议 i 开始于startDayi ,结束于endDayi . 你可以在满足 st ...