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 ...
随机推荐
- wcf 发布到iis后报错
HTTP Error 404.3 - Not Found http://iweb.adefwebserver.com/Default.aspx?tabid=57&EntryID=34 未能从程 ...
- emwin之WM_DeleteWindow函数使用注意事项
@2018-12-21 [小记] 在当前窗口P创建一新窗口C后再使用函数 WM_DeleteWindow 删除该C窗口时,删除窗口句柄必须是根句柄,如果使用 WM_GetClientWindow(pM ...
- 【bfs】迷宫问题
[题目描述] 定义一个二维数组: int maze[5][5] = { 0,1,0,0,0, 0,1,0,1,0, 0,0,0,0,0, 0,1,1,1,0, 0,0,0,1,0, }; 它表示一个迷 ...
- nginx日志文件的定时切割与归纳
应用环境:生产环境中的Nginx服务器,由于访问日志文件增长速度非常快,日志太大会严重影响服务器效率.同时,为了 方便对日志进行分析计算,须要对日志文件进行定时切割.定时切割的方式有按月切割.按天切割 ...
- 天梯赛 L2-001 紧急救援
L2-001 紧急救援 (25 分) 作为一个城市的应急救援队伍的负责人,你有一张特殊的全国地图.在地图上显示有多个分散的城市和一些连接城市的快速道路.每个城市的救援队数量和每一条连接两个城市的快速道 ...
- Libre OJ 144、145 (DFS序)
部分参考自博客:https://blog.csdn.net/hpu2022/article/details/81910490 在许多问题中,由于树结构复杂通常会导致问题很棘手,因为其实非线性结构,操作 ...
- ocr智能图文识别 tess4j 图文,验证码识别
最近写爬虫采集数据,遇到网站登录需要验证码校验,想了想有两种解决办法 1,利用htmlunit,将验证码输入到swing中,并弹出一个输入框,手动输入验证码,这种实现方式,如果网站需要登录一次可以使用 ...
- Surface Pro 4 系统优化全教程及QA
甲.如何根据你的需求选择相应版本的surface1.Core M3-6Y30,Core i5-6300U,Core i7-6650U的性能差距有多大?2.HD 515,HD520,Iris 540的性 ...
- A1132. Cut Integer
Cutting an integer means to cut a K digits lone integer Z into two integers of (K/2) digits long int ...
- 同一台机器安装多个zabbix-agentd
先来看一zabbix-agentd rpm包安装生成的文件 有的机器之前安装过老版本的,我这边就直接将这些配置文件打包到一个文件夹,然后上传到对应的机器上解压一下修改配置文件就ok啦 改一下启动脚 ...