vue.cli 中使用 less 来写css样式
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样式的更多相关文章
- vue项目中打包编译后,CSS样式【-webkit-box-orient: vertical】打包后丢失问题
最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了 ...
- react中怎么写css样式?
JSX基本语法中关于react如何写css样式主要有三种方法 1.基于class --(className) 基于className ,通过className在style中给该class名的DOM元素 ...
- vue cli 中关于vue.config.js中chainWebpack的配置
Vue CLI 的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...
- vue cli中的env详解
前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...
- Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试
在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...
- Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer
问题描述: Vue-Cli 3.x 默认开启了 autoprefixer,但对于在 main.js 中通过 import 引入的 CSS 并没有自动添加前缀 分析原因: autoprefixer 在项 ...
- 后端数据中含有html标签和css样式,前端如何转译展示样式效果。
后端含有html标签和css样式的数据: domain="<span style='color:red'>www.baidu.com</span>" (vu ...
- Vue项目中引入外部文件(css、js、less)
例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步 ...
- scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?
css的预编译: 使用步骤: 第一步:用npm下三个loader(sass-loader.css-loader.node-sass): 第二步:在build目录找到webpack.base.confi ...
随机推荐
- 【BZOJ4890】[TJOI2017]城市(动态规划)
[BZOJ4890][TJOI2017]城市(动态规划) 题面 BZOJ 洛谷 题解 数据范围都这样了,显然可以暴力枚举断开哪条边. 然后求出两侧直径,暴力在直径上面找到一个点,使得其距离直径两端点的 ...
- 故障排错-ping dup!
ping DUP! ping一个vc中虚拟机的地址发现如下,出现了DUP! . 解决方式如下: 1.根据mac地址找到虚拟机网卡的端口组 然后编辑绑定和故障切换,切换负责平衡
- AWS免费EC2
终于弄到这个EC2了.回想下过程大概如下 1.注册账号 https://amazonaws-china.com/cn/free/ 可以这地址点击"创建免费账户" 2.注册填写信息, ...
- CF1096F Inversion Expectation
逆序对分三类: 1.已知对已知 树状数组直接处理即可 2.未知对未知 设未知数的位置数为\(m\),则有\(m(m-1)/2\)个数对.一个数对是逆序对的期望是\(0.5\)(一个逆序对与一个非逆序对 ...
- kali源更新
对于新装kali的同学一点存在着更新源的问题 这是对初次安装,进行系统更新的教程 首先需要有gpg_key wget -q -O - https://archive.kali.org/archive- ...
- javascript柯里化及组合函数~
大家是不是看我上篇博文有点蒙.用的的curry和compose是什么鬼,怎么那么神奇.上篇博文也是主要用到了这两个函数.那今天我们来聊一下curry和compose,这两个东西是函数式编程很重要的东西 ...
- java 遍历方法 及 数组,ArrayList,HashMap,HashSet的遍历
一,遍历方法的实现原理 1.传统的for循环遍历,基于计数器的: 遍历者自己在集合外部维护一个计数器,然后依次读取每一个位置的元素,当读取到最后一个元素后,停止.主要就是需要按元素的位置来读取元素. ...
- [luogu3391][文艺平衡树]
题目链接 思路 splay区间操作的裸题. 假如要对l-r这段区间操作,那么就先把l-1伸展到根节点,然后把r +1伸展为根的儿子.这样r + 1的左儿子就是要操作的区间了.只要在上面打上标记,以后每 ...
- 跟我一起写一个hello-world react组件并发布到npm
第一步:初始化我们的配置 $ mkdir react-hello-world $ cd react-hello-world/ $ npm init -y 修改我们的package.json文件 //p ...
- mybatis 的批量更新操作sql
转: mybatis 的批量更新操作sql 2018年07月23日 10:38:19 海力布 阅读数:1689 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...