在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. 精通css学习记录

    #字体 * 无衬线字体(Sans-serif):Helvetica,Arial,'Lucida Family',Verdana,Tohoma,'Trebuchet MS'  * 有衬线字体(Serif ...

  2. C# 遍历对象下的 属性

    foreach (System.Reflection.PropertyInfo p in users.GetType().GetProperties()) { var xx = p.Name; var ...

  3. 应用七:Vue之适配test环境变量(2.0版)

    在我们使用vue-cli创建的项目中,默认只有开发development和生产production两种环境变量:但在实际的项目开发过程中往往都会有测试环境,下面就来说一下如何适配测试环境test的环境 ...

  4. CSV文件模块的使用

    ---恢复内容开始--- 1.CSV模块使用流程 1.导入模块 impport CSV 2.打开文件(xxx.csv) with open('xxx.csv','a',encoding='utf-8' ...

  5. luogu p3918[国家集训队]特技飞行 贪心

    开始没看出来是贪心,一度以为是动态规划,还是太弱了呀-.. 不难分析出,两个相同的飞行动作之间夹一个相同的动作是多余的,所以就贪心一下,按Ci从大到小排序,依次加到左右两端点,知道加不了为止. 代码: ...

  6. mysql 与 memcache 字段名后面有空格时会产生什么问题(转)

    同事下午遇到一问题,MySQL 和 Memcached 对于同一个key,不能对应起来.最终原因是:PHP将key写入MySQL数据库之前,没有经过trim()过滤首尾空格(关键是尾部空格),结果: ...

  7. ZOJ 2314 Reactor Cooling

    Reactor Cooling Time Limit: 5000ms Memory Limit: 32768KB This problem will be judged on ZJU. Origina ...

  8. [React] How to use a setState Updater Function with a Reducer Pattern

    In this lesson we'll walk through setting up an updater function that can receive an action argument ...

  9. php PDO连接mysql

    近期在linux装了新的环境.php5.6+mysql5.5+nginx. 然后用原来的mysql链接数据库出现的错误. 原因就是说连接数据库的方法太旧.建议我用mysqli和PDO来连接数据库. 好 ...

  10. void型指针

    void型指针,表示这个指针指向的内存中的数据的类型要由用户来指定. 比方内存分配函数malloc函数返回的指针就是void *型. 用户在使用这个指针的时候.要进行强制类型转换,也就是显式说明该指针 ...