项目使用vue cli 3.x搭建,没有了配置文件,如何更方便的查找到对应的scss文件,配置项目支持sourceMap方式?

分二步走:

1、项目根目录(不是src目录,不要搞错了)添加vue.config.js

2、vue.config.js内容如下:

module.exports = {
css: {
sourceMap: true, // 开启 CSS source maps
}
}

  

记得要停止项目,再重新运行项目

npm run serve

不然你以为没有生效,以为我在忽悠你,根本没作用嘛。。。。

这样,在浏览器,就能方便找到样式的归属啦:

vue cli 3.x 配置使用 sourceMap的更多相关文章

  1. vue cli 3 lintOnSave 配置有时无效问题

    一个使用vue cli 3.2创建的项目,创建时未开启 lintOnSave,后来希望开启并设置为 lintOnSave: 'error',但配置不生效. 解决方法1:新创建项目(此时vue cli ...

  2. Vue3学习(八)之 Vue CLI多环境配置

    一.前言 这里相对于之前就没那么麻烦了,通俗点说就是使用配置文件来管理多环境,实现环境的切换. 二.实现切换 1.增加开发和生产配置文件 在web的根目录下,创建开发环境切换配置文件.env.dev, ...

  3. vue/cli 3.0配置NODE_ENV

    原文地址 在项目开发中我们需要配置环境变量,开发环境,生产环境和测试环境.在cli 2.0的版本中我们是通过在config文件夹进行配置的,vue/cli 3.0相对简单,只需要在项目根目录创建.en ...

  4. Vue CLI 是如何实现的 -- 终端命令行工具篇

    Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供了终端命令行工具.零配置脚手架.插件体系.图形化管理界面等.本文暂且只分析项目初始化部分,也就是终端命令行工具的实现. 0. 用法 ...

  5. @vue/cli 3.x 版本配置productionGzip提高性能

    第一步:安装插件 npm i -D compression-webpack-plugin 第二步:引入.在文件vue.config.js里导入compression-webpack-plugin,并添 ...

  6. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  7. 使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development、production)

    使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development.production) --mode 指定环境模式 ...

  8. @vue/cli 3.x项目脚手架 webpack 配置

    @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

  9. VUE cli 4.x下配置多页面以及同时配置支持element-ui及mint-ui并且优化首页文件大小。

    场景,公司的一个小型项目,需同时支持移动端和PC端.最开始考虑做两个独立的项目.但后来考虑到总共只有4个功能页面,布署起来相对麻烦.所以决定做在一个项目里. 1.升级vue-cli到4.x npm i ...

随机推荐

  1. SpringCloud 教程 | 终章

    错过了这一篇,你可能再也学不会 Spring Cloud 了!Spring Boot做为下一代 web 框架,Spring Cloud 作为最新最火的微服务的翘楚,你还有什么理由拒绝.赶快上船吧,老船 ...

  2. 补码一位乘法 Booth算法 Java简易实现

    本文链接:https://www.cnblogs.com/xiaohu12138/p/11955619.html. 转载,请说明出处. 本程序为简易实现补码一位乘法,若代码中存在错误,可指出,本人会不 ...

  3. Kubernetes---Service(SVC)服务--ingress api

    对于k8s传统的svc来说 它仅支持4层代理,如果遇到7层代理的话,是没有办法去实现的 k8s官方在1.11中推出了ingress api接口,通过ingress达到7层代理的效果 对于ingress ...

  4. C语言字符串替换

    void exchg(char * str) { if(str == NULL) return; int len = strlen(str); char tmp; for(int i=0,j=len- ...

  5. laravel_Supervisor队列

    Queue 1. 队列驱动 //数据库驱动,修改.env的QUEUE_DRIVER QUEUE_DRIVER=database 1. 数据库表 php artisan queue:table php ...

  6. vue—组件通信,ref

    组件通信: 父组件传递子组件: 把需要的数据 传递给 子组件的数据,以数据绑定(v-bind)的形式,传递到子组件内部,供子组件使用,缩写(:) 动态传递: 第一步:在父组件中的子组件标签中进行动态的 ...

  7. 【第一季】CH06_FPGA设计Verilog基础(三)

    [第一季]CH06_FPGA设计Verilog基础(三) 一个完整的设计,除了好的功能描述代码,对于程序的仿真验证是必不可少的.学会如何去验证自己所写的程序,即如何调试自己的程序是一件非常重要的事情. ...

  8. 谈谈对Spring IOC的理解(转发)

    学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理解的,今天和大家 ...

  9. java怎么解除文件占用(Dom4j操作完xml后怎么关流)

    一.背景 项目中要解析xml,由于Dom4j的诸多优点,我就用Dom4j解析xml,代码如下: public void readXML() { SAXReader reader = new SAXRe ...

  10. Eclipse 动态添加web.xml

    在创建javaweb项目时,也许会忘记让项目创建web.xml文件,这是我们可以右键创建后的项目,在javaEE Tools中选择第二个即可. Generate deployment Descript ...