vue-cli 的webpack中已配置了less,但 package.json 中没有选项,为了方便开发中使用,需安装一下:

安装方式一:

npm install less less-loader --save-dev

安装less和less-loader,并记录到devDependencies中,因为这是我们在开发中使用的而非在生产中使用

安装方式二:

或直接在 package.json 的 devDependencies 中

    "less": "^3.0.1",
"less-loader": "^4.1.0",

然后 cnpm i 安装一下

使用:

<style scoped lang="less">
.hello{
.test{
border:1px solid red;
}
}
</style>

加上 lang="less" 就可以使用了

* 如果不能使用,检查一下配置:

检查 /build/utils.js 中  有没有以下配置

return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}

vue.cli 中使用 less 来写css样式的更多相关文章

  1. vue项目中打包编译后,CSS样式【-webkit-box-orient: vertical】打包后丢失问题

    最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了 ...

  2. react中怎么写css样式?

    JSX基本语法中关于react如何写css样式主要有三种方法 1.基于class --(className) 基于className ,通过className在style中给该class名的DOM元素 ...

  3. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

  4. vue cli中的env详解

    前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...

  5. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  6. Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer

    问题描述: Vue-Cli 3.x 默认开启了 autoprefixer,但对于在 main.js 中通过 import 引入的 CSS 并没有自动添加前缀 分析原因: autoprefixer 在项 ...

  7. 后端数据中含有html标签和css样式,前端如何转译展示样式效果。

    后端含有html标签和css样式的数据: domain="<span style='color:red'>www.baidu.com</span>" (vu ...

  8. Vue项目中引入外部文件(css、js、less)

    例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步 ...

  9. scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?

    css的预编译: 使用步骤: 第一步:用npm下三个loader(sass-loader.css-loader.node-sass): 第二步:在build目录找到webpack.base.confi ...

随机推荐

  1. 洛谷P3740 【[HAOI2014]贴海报】

    (呃...本蒟蒻的第一篇题解qwq)..不废话了讲正题..思路来源于铺地毯(-->传送门)..先算出每一个格子上覆盖的海报并把可见的海报做标记然后算出有多少海报是可见的..但是作为省选题怎么可能 ...

  2. 【转】WEB服务器与应用服务器的区别

    https://blog.csdn.net/liupeng900605/article/details/7661406 一.简述 WEB服务器与应用服务器的区别: 1.WEB服务器: 理解WEB服务器 ...

  3. JSOI2014骑士游戏(最短路)

    题目背景 长期的宅男生活中,JYY又挖掘出了一款RPG游戏.在这个游戏中JYY会 扮演一个英勇的骑士,用他手中的长剑去杀死入侵村庄的怪兽. 题目描述 在这个游戏中,JYY一共有两种攻击方式,一种是普通 ...

  4. redis 从入门到遗忘

    Key操作 keys * *: 通配任意多个字符 ?: 通配单个字符 []: 通配括号内的某1个字符 exists key 存在返回1,不存在返回0 type key rename oldkey ne ...

  5. poj 1611 The Suspects(并查集输出集合个数)

    Description Severe acute respiratory syndrome (SARS), an atypical pneumonia of unknown aetiology, wa ...

  6. 洛谷P3959 宝藏

    去年NOIP第二毒瘤(并不)的题终于被我攻克了,接下来就只剩noip难度巅峰列队了. 首先说一下三种做法:随机化,状压DP和搜索. 前两种做法我都A了,搜索实在是毒瘤,写鬼啊. 有些带DFS的记忆化搜 ...

  7. Django 路由报错友好提示

    这个方法要在设置路由文件内使用也就是urls.py内. """mysite URL Configuration The `urlpatterns` list routes ...

  8. 关于xshell 无法连接虚拟机之我的解决方案

    先说一下我碰到的问题 1,虚拟机配置网络后,并且选的模式是桥接模式,虚拟机中可以访问外网,宿主机中也可以访问外网,虚拟机中可以ping通宿主机,但是宿主机无法ping通虚拟机 解决: 我的原因:我会出 ...

  9. 苹果电脑利用curl下载数据集

    在看tensorflow书上迁徙学习的这一部分的时候,书上说利用 curl http://download.tensorflow.org/example_images/flower_photos.tg ...

  10. fork()、vfork()、clone()的区别

    因为生活的复杂,这是一个并行的世界,在同一时刻,会发生很多奇妙的事情,北方下雪,南方下雨,这里在吃饭,那边在睡觉,有人在学习,有人在运动,所以这时一个多彩多姿的世界,每天都发生着很多事情,所以要想很好 ...