在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. 07 Django组件-中间件

    中间件 方式一:函数式:中间件[middleware],也叫钩子方法[钩子函数],hook Django中的中间件是一个轻量级.底层的插件系统,可以介入Django的请求和响应处理过程,修改Djang ...

  2. vc++如何创建程序-析构函数01

    #include<iostream.h>class Point{public: int x; int y; Point() { x=0; y=0; }//构造函数是用来创建函数本身,那么, ...

  3. python中if语句的使用

    1.对体重标准的判断 #coding:utf-8 height=170weight=65#weight=height-105if weight<height-105: print '您偏瘦!注意 ...

  4. Nginx负载均衡health_check分析

    在Nginx负载均衡中,我们很难保证说每一台应用服务器都能一直正常的运行下去.但是我们可以通过设置Nginx来检测这些应用服务器,检测这些服务器当中不能访问的. Nginx的检测方式分为两种,一种是被 ...

  5. Ural 1996 Cipher Message 3 (生成函数+FFT)

    题面传送门 题目大意:给你两个$01$串$a$和$b$,每$8$个字符为$1$组,每组的最后一个字符可以在$01$之间转换,求$b$成为$a$的一个子串所需的最少转换次数,以及此时是从哪开始匹配的. ...

  6. Linux安装expect命令

    [Linux安装expect命令]:--expect是在Tcl基础上创建起来的,所以在安装expect前我们应该先安装Tcl.①:tcl安装源码下载:http://www.tcl.tk/softwar ...

  7. 2016 年 Java 工具和技术的调查:IDEA 已超过

    最近「技术最前线」看到 RebelLabs 做了一次 2016 年 Java 工具与技术的调查,调查报告虽然是 6 月公布的,但数据一点也不过时. 所以「技术最前线」忙会了一中午,写了这篇文章,带大家 ...

  8. Spring JDBC模板类—org.springframework.jdbc.core.JdbcTemplate(转)

    今天看了下Spring的源码——关于JDBC的"薄"封装,Spring 用一个Spring JDBC模板类来封装了繁琐的JDBC操作.下面仔细讲解一下Spring JDBC框架. ...

  9. yiii 数据库备份导出

    应用场景 数据对于网站来说 是非常重要的 一般 cms 后台 都有 数据备份功能.使用Yii 的第三方拓展 可以快速开发. spanjeta/yii2-backup spanjeta/yii2-bac ...

  10. E - QS Network

    E - QS Network 思路:最小生成树,数组不要开小了. #include<cstdio> #include<cstring> #include<iostream ...