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. 集群概念Cluster

    系统扩展方式: scale up,向上扩展:提高主机性能等,质变: scale out,向外扩展:水平扩展,质不变量变: 集群类型: LB:Load Balancing 负载均衡集群: HA:High ...

  2. ListView中的组件Button的OnClick事件触发时机

    Android开发时,ListView中的组件Button的OnClick事件必须在ListView之外的组件事件触发后才能触发? 此处ListView无OnItemClick事件,而且ListVie ...

  3. module_loader.py

    # few functions that make it possible to import functions # from jupyter notebooks as from modules; ...

  4. 【dfs】P1331 海战

    题目描述 在峰会期间,武装部队得处于高度戒备.警察将监视每一条大街,军队将保卫建筑物,领空将布满了F-2003飞机.此外,巡洋船只和舰队将被派去保护海岸线.不幸的是因为种种原因,国防海军部仅有很少的几 ...

  5. 「HNOI2016」树 解题报告

    「HNOI2016」树 事毒瘤题... 我一开始以为每次把大树的子树再接给大树,然后死活不知道咋做,心想怕不是个神仙题哦 然后看题解后才发现是把模板树的子树给大树,虽然思维上难度没啥了,但是还是很难写 ...

  6. poj-3279 poj-1753(二进制枚举)

    题目链接:http://poj.org/problem?id=3279 题目大意: 有一个m*n的棋盘(1 ≤ M ≤ 15; 1 ≤ N ≤ 15),每个格子有两面分别是0或1,每次可以对一个格子做 ...

  7. wampserver安装之后出现“无法启动,因为计算机中丢失了msvr110.dll”

    1.是因为计算机缺失包所致,我的解决办法是安装一个包来解决. 2.网址如下:下载网址 3.下载完之后,然后安装就是(根据自己的系统版本来选择合适的安装版本).

  8. mysql视图和临时表的区别

    视图 视图是由从数据库的基本表中选出来的数据组成的逻辑窗口,它与基本表不同的是,视图是一个虚表.数据库中只存放视图的定义,而不存放视图包含的数据,这些数据仍存放在原来的基表中.所以基表中的数据如果发生 ...

  9. windows 匿名管道: 父进程与子进程通信 (进程间通信之CreatePipe)

    看了很多篇相关的资料,感觉这个还是比较靠谱的: 进程间通信之CreatePipe   https://blog.csdn.net/dacxu/article/details/30071081 特别是  ...

  10. 交叉编译jpeglib遇到的问题

    由于要在开发板中加载libjpeg,不能使用gcc编译的库文件给以使用,需要自己配置使用另外的编译器编译该库文件. /usr/bin/ld: .libs/jaricom.o: Relocations  ...