vue-cli 构建的项目默认是不支持 less 的,需要自己添加。

首选,安装 less 和 less-loader ,在项目目录下运行如下命令

npm install less less-loader --save-dev

当然,比起 npm,我个人更喜欢用 yarn

yarn add less less-loader --dev

安装成功后,打开 build/webpack.base.conf.js ,在 module.exports = 的对象的 module.rules 后面添加一段:

module.exports = {
// 此处省略无数行,已有的的其他的内容
module: {
rules: [
// 此处省略无数行,已有的的其他的规则
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}
]
}
}

最后,在代码中的 style 标签中 加上 lang="less" 属性即可~

<style scoped lang="less">

</style>

vue-cli 构建的项目中 如何使用less的更多相关文章

  1. @vue/cli 构建得项目eslint配置

    如下:package.json // package.json { "name": "ecommerce-mall-front", "version& ...

  2. @vue/cli 构建得项目eslint配置2

    使用ESLint+Prettier来统一前端代码风格 加分号还是不加分号?tab还是空格?你还在为代码风格与同事争论得面红耳赤吗? 正文之前,先看个段子放松一下: 去死吧!你这个异教徒! 想起自己刚入 ...

  3. 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  4. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  5. vue-cli构建的项目中请求代理与项目打包

    vue-cli构建的项目中,生产模式下的打包路径.与生产模式下的请求代理简单示意

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

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

  7. vue cli 3.x 项目部署到 github pages

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...

  8. Vue+webpack构建一个项目

    1.安装CLI命令的工具  推荐用淘宝的镜像 npm install -g @vue/cli @vue/cli-init 2.使用命令构建一个名为myapp的项目 vue init webpack m ...

  9. C++\CLI语法 在项目中的使用

    通常情况下,对一个标准的com组件进行集成,网上普遍使用的方式有: 1.#import *.dll 或 #import *.ocx的方式,VS编译器重新编译后,就会自动生成组件对应的*.tlh文件,该 ...

随机推荐

  1. P2837 晚餐队列安排

    此题可能用动规不太好做,主要是状态转移方程很难想个人认为,思维发散的大佬们忽视. 我看了这位大佬的dp题解后才想到了方程,在此受我一膜%%% 嗯,说下思路: 先用a[i]数组存一下输入的编号: 然后用 ...

  2. Django------多表操作

    一. 创建模型 实例:我们来假定下面这些概念,字段和关系 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情模型和作者模型之间是一对一的 ...

  3. Codeforces 1077E Thematic Contests(二分)

    题目链接:Thematic Contests 题意:给出n道有类型的题目,每天组织一场专题比赛,该天题目数量必须是前一天的2倍,第一天的题目数量可以任意选择,求能消耗的最多题目数量. 题解:先整理成不 ...

  4. 这可能是最为详细的Docker入门吐血总结

    这可能是最为详细的Docker入门吐血总结  https://www.cnblogs.com/ECJTUACM-873284962/p/9789130.html Docker是什么? 在计算机技术日新 ...

  5. Oracle Database 快捷版 安装 连接

    Oracle Database 快捷版 11g 第 2 版 下载地址:http://www.oracle.com/technetwork/cn/database/database-technologi ...

  6. np.array.all()和np.array.any()函数

    np.array.all()是对np.array中所有元素进行与操作,然后结果返回True或False np.array.any()是对np.array中所有元素进行或操作,然后结果返回True或Fa ...

  7. MessagePack for C#

    MessagePack for C# 快速序列化组件MessagePack介绍   简介 MessagePack for C#(MessagePack-CSharp)是用于C#的极速MessagePa ...

  8. 从Socket入门到BIO,PIO,NIO,multiplexing,AIO(未完待续)

    Socket入门 最简单的Server端读取Client端内容的demo public class Server { public static void main(String [] args) t ...

  9. RT-SA-2019-007 Code Execution via Insecure Shell Functiongetopt_simple

    Advisory: Code Execution via Insecure Shell Function getopt_simple RedTeam Pentesting discovered tha ...

  10. 在centos7下安装.net core

    在这里记录下安装的过程: 一开始需要去官网下载centos相关的dotnetcore的sdk 上传到linux,解压,发现需要安装libunwind, 安装libunwind:yum install  ...