在vue-cli中构建的项目是可以使用less的,但是查看package.json可以发现,并没有less相关的插件,所以我们需要自行安装。

//第一步:安装
npm install less less-loader --save-dev
即通过npm安装less和less-loader,并记录到devDependencies中,因为这是我们在开发中使用的而非在生产中使用,所以就不将之记录在 dependencies 中。

//第二步:在配置文件中配置
 实际上如果我们通过vue-cli来构建项目,这一步是可以省略的。

 在webpack.dev.conf.js中,我们可以看到下面的代码:

  module: {
     // 默认是这样的 rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
   //后面userPostCss去掉就启动less sass 了
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  },
 即webpack.dev.conf.js在合并了webpack.base.conf.js的基础上又添加了dev环境下的module。

  

vue-cli webpack配置中 如何启动less-loader sass-loader的更多相关文章

  1. Vue CLI 3开发中屏蔽的EsLint错误 (.eslintrc.js 在vue3+中 修改这个)

    1.关闭eslint校验有了eslint的校验,可以来规范开发人员的代码,是挺好的.但是有些像缩进.空格.空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了.所以,我还是会选择关闭eslint校 ...

  2. [Vue CLI 3] 插件开发中的 genCacheConfig 细节研究

    在 @vue/cli-plugin-babel/index.js 中: api.genCacheConfig('babel-loader', {}, []) 我们看一下 api.genCacheCon ...

  3. [Vue CLI 3] 配置 webpack-bundle-analyzer 插件

    首先还是简单介绍一下 webpack-bundle-analyzer 是做什么的: Visualize size of webpack output files with an interactive ...

  4. [Vue CLI 3] 配置解析之 indexPath

    在 vue.config.js 配置中有一个 indexPath 的配置,我们先看看它有什么用? 用来指定 index.html 最终生成的路径(相对于 outputDir) 先看看它的默认值:在文件 ...

  5. Vue CLI Webpack 创建Vue项目

    简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...

  6. @vue/cli的配置知道多少-publicPath,outputDir,assetsDir,indexPath,filenameHashing,configureWebpack,productionSourceMap

    vue.config.js的简单介绍 vue.config.js 是一个可选的配置文件, 在项目的 (和 package.json 同级的) 根目录中存在这个文件. 默认情况没有这个文件需要我们手动去 ...

  7. [Vue CLI 3] 配置解析之 parallel

    官方文档中介绍过在 vue.config.js 文件中可以配置 parallel,作用如下: 是否为 Babel 或 TypeScript 使用 thread-loader. 该选项在系统的 CPU ...

  8. [Vue CLI 3] 配置解析之 css.extract

    大家还记得我们在老版本中,对于线上环境配置中会把所有的 css 多打成一个文件: 核心是使用了插件 extract-text-webpack-plugin,方式如下: 第一步都是加载插件 const ...

  9. Vue CLI 3 配置兼容IE10

    最近做了一个基于Vue的项目,需要兼容IE浏览器,目前实现了打包后可以在IE10以上运行,但是还不支持在运行时兼容IE10及以上. 安装依赖 yarn add --dev @babel/polyfil ...

随机推荐

  1. 巧用Ajax的beforeSend提高用户体验

    jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作. $.ajax({ beforeSend:function(){ ...

  2. Github 团队协作基本流程与命令操作 图解git工作流程

    # 先 fork 项目到自己 github # 1. 从自己仓库克隆到本地(clone 的是项目指定的默认分支,比如 master) git clone git@github.com:me/em.gi ...

  3. 企业级任务调度框架Quartz(4) 多个job实例注册到任务调度器上

    前序:     在第一个例子我看到了自定义的作业类在任务调度器上注册后,则通过任务调度器来实现启动:下面,我们将同一个作业类执行两个任务,并都将他们注册到任务调度器上!     首先一个job类指向两 ...

  4. Centos7 单节点安装 FastDFS + FastDHT服务

    Centos7 单节点安装 FastDFS + FastDHT服务 1.安装gcc(编译时需要) FastDFS是C语言开发,安装FastDFS需要先将官网下载的源码进行编译,编译依赖gcc环境,如果 ...

  5. 路飞学城Python-Day79

    27-url控制器之path方法 由于基于re_path的路径编写方式是重复性高的编写url,如果规则改变了,则对应的要去修改很多url,这样是很不方便的 所以采用Django2.0的path去编写u ...

  6. [luogu2047 NOI2007] 社交网络 (floyed最短路)

    传送门 输入输出样例 输入样例#1: 4 4 1 2 1 2 3 1 3 4 1 4 1 1 输出样例#1: 1.000 1.000 1.000 1.000 题解 在进行floyed的过程中,顺便更新 ...

  7. awk的总结

    入门总结 Awk简介 awk不仅仅时linux系统中的一个命令,而且是一种编程语言,可以用来处理数据和生成报告.处理的数据可以是一个或多个文件,可以是来自标准输入,也可以通过管道获取标准输入,awk可 ...

  8. 00068_Date类

    1.类Date表示特定的瞬间,精确到毫秒: 2.查阅Date类的描述,发现Date拥有多个构造函数,只是部分已经过时,但是其中有未过时的构造函数可以把毫秒值转成日期对象: //创建日期对象,把当前的毫 ...

  9. 【Codeforces Round #505 (rated, Div. 1 + Div. 2, based on VK Cup 2018 Final) A】 Doggo Recoloring

    [链接] 我是链接,点我呀:) [题意] 你可以把出现次数大于1的颜色换成其他颜色. 问你最后能不能全都变成同一种颜色 [题解] 判断一下有没有出现次数大于1的就好. 有的话.显然可以一直用它变颜色. ...

  10. Java基础学习总结(65)——Java中的String,StringBuilder和StringBuffer比较

    字符串,就是一系列字符的集合. Java里面提供了String,StringBuffer和StringBuilder三个类来封装字符串,其中StringBuilder类是到jdk 1.5才新增的.字符 ...