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 ...
随机推荐
- [SNOI2017]一个简单的询问【莫队+容斥原理】
题目大意 给你一个数列,让你求两个区间内各个数出现次数的乘积的和. 分析 数据范围告诉我们可以用莫队过. 我并不知道什么曼哈顿什么乱七八糟的东西,但是我们可以用容斥原理将这个式子展开来. \[\sum ...
- python实用脚本集
iScript 是Github上 PeterDing 大神写的一个脚本集,由多数的 python 脚本和少数GM脚本组成. 含有以下几个脚本: xiami.py - 下载或播放高品质虾米音乐(xiam ...
- dasd
https://www.crifan.com/use_pyinstaller_to_package_python_to_single_executable_exe/ http://blog.csdn. ...
- CF983A Finite or not?(数学)
题意:给出分母,分子和进制,要求判断该数是否为有限小数. Solution 表示并不知道怎么判断. 度娘:“一个分数在最简分数的情况下,如果它的分母只含有2和5两个质因数,这个分数就能化成有限小数.” ...
- [HAOI2010]最长公共子序列(LCS+dp计数)
字符序列的子序列是指从给定字符序列中随意地(不一定连续)去掉若干个字符(可能一个也不去掉)后所形成的字符序列.令给定的字符序列X=“x0,x1,…,xm-1”,序列Y=“y0,y1,…,yk-1”是X ...
- OpenLayers学习笔记(二)— QML与HTML通信之画图
作者: 狐狸家的鱼 Github: 八至 本文链接:QML与 HTML通信—实现QML中点击功能按钮在地图上画图 一.HTML-map var drarGraphic; var drawType;fu ...
- 浏览器直接显示html代码,不解析代码
在某些时候,我们可能因为某些特殊的原因,不想让浏览器解析html代码. 1,把代码放到js中,如下 <script type='text/html' style='display:block'& ...
- 【洛谷 P1616 疯狂的采药】
题目背景 此题为NOIP2005普及组第三题的疯狂版. 此题为纪念LiYuxiang而生. 题目描述 LiYuxiang是个天资聪颖的孩子,他的梦想是成为世界上最伟大的医师.为此,他想拜附近最有威望的 ...
- unittest的使用二——生成基于html的测试报告
mac下的安装: 1.下载HTMLTestRunner.py文件,下载地址http://tungwaiyip.info/software/HTMLTestRunner.html,可以复制里面的内容到一 ...
- 认识EasyUI——DataGrid的onClickRow事件
关键代码: $("#dg2").datagrid({ onClickRow: function (index, row) { //easyui封装好的时间(被单机行的索引,被单击行 ...