在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. adb使用实践

    目录 1. adb 端口占用 2. 查看包名和MainAcitivity =============================================================== ...

  2. JS 九九运算表

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Git 常用命令速查(转载)

    git branch 查看本地所有分支git status 查看当前状态 git commit 提交 git branch -a 查看所有的分支git branch -r 查看远程所有分支git co ...

  4. 【disconf】环境搭建【linux】

     1.搭建disconf需要安装的配置. 安装Linux:CentOS7     安装Zookeeper:zookeeper-3.4.6     安装Redis:redis-3.0.0     安装N ...

  5. python笔记3----第一个小爬虫

    1.先看看要爬的网站有没有爬虫协议,可以看该网站有没有robots.txt,如豆瓣的: 2.requests模块:[requests是第三方,代码比python自带的urllib模块简单] 先加载re ...

  6. python数据分析------文本挖掘(jieba)

    1.import jieba jieba的cut函数有三个模式:全模式.精准模式.搜索引擎模式 1 精确模式,试图将句子最精确地切开,适合文本分析: 2 全模式,把句子中所有的可以成词的词语都扫描出来 ...

  7. [置顶] HTTP 幂等性概念和应用

    转自:http://coolshell.cn/articles/4787.html HTTP 幂等性概念和应用 [ 感谢 Todd 同学 投递本文 ] 基于 HTTP 协议的 Web API 是时下最 ...

  8. ubuntu 下jrtplib编译

    我本来想用最新的 jrtplib-3.9.1和jthread-1.3.1,可是最新的那两个版本中都是用cmake进行配置的,我搞了好久,查了好多资料也没有解决交叉编译的问题,无奈,只能选用比较老的两个 ...

  9. maven引入MySQL相关依赖

    <!--mysql驱动包--> <dependency> <groupId>mysql</groupId> <artifactId>mysq ...

  10. 专访Bruce Douglass,谈嵌入式经验

     Bruce:表面上看,编程就是想要实现什么就写什么代码:但事实是,敲代码只是软件开发过程中很小的一部分,程序员的工作还包括安全分析.责任分析.产品验证.产品分析等.      =========== ...