在用 vue 画页面时,如果想用less,但又不想在组件中直接添加 style ,可以使用 vs code 的插件:EasyLess

EasyLess 安装好后必须在 setting.json 中对它进行配置。如果使用默认配置,在编写 less 后,会自动在根目录编译生成多个以 less 命名的 css 文件。一个项目中是不需要加载不同的 css 文件的,可以把所有的组件样式合并为一个 css 文件,比如下面这样的:

可以将不同组件的样式以不同的 less 文件进行编辑,最后生成一个 app.css 文件,然后在项目的 index.html 中加载。

如果哪个组件的布局或样式有变化,可以直接在 less 文件夹中找到对应组件的 less 文件进行修改。

EasyLESS 的配置文件为:

    "less.compile": {
"out": "../css/app.css", //定义好输出的文件路径
"sourceMap": false,
"compress": true,
"autoprefixer": "> 5%, last 2 Chrome versions, not ie 6-9"
},

完毕。

Visual Studio Code 配置 EasyLESS,如果想用less,但又不想在组件中直接添加 style 时可以参考的更多相关文章

  1. Visual Studio Code配置 HTML 开发环境

    Visual Studio Code配置 HTML 开发环境 https://v.qq.com/x/page/l0532svf47c.html?spm=a2h0k.11417342.searchres ...

  2. Visual Studio Code配置GoLang开发环境

    Visual Studio Code配置GoLang开发环境 在Visual Studio Code配置GoLang开发环境 作者:chszs,未经博主允许不得转载.经许可的转载需注明作者和博客主页: ...

  3. Visual Studio Code配置

    Visual Studio Code 从1.23.0开始VS Code就不再默认提供各语言版本, 而是改为使用插件的方式提供语言包. 在插件商店搜索Chinese (Simplified), 安装. ...

  4. Visual Studio Code配置技巧

    Visual Studio Code配置技巧 VS Code是啥 Visual Studio Code(以下简称 VS Code) 是一个免费.开源.跨平台的由微软开发的程序编辑器.它是用 TypeS ...

  5. Visual Studio Code 配置 gcc

    作者:谭九鼎链接:https://www.zhihu.com/question/30315894/answer/154979413来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  6. Visual Studio Code 配置C/C++环境

    0. 前言 VS Code 是微软发布一款跨平台的源代码编辑器,其拥有强大的功能和丰富的扩展,使之能适合编写许多语言. 本文面向初学者(但不是纯小白),分享一点我配置C/C++的经验. 本文所有内容均 ...

  7. 最全的Visual Studio Code配置及使用教程

    史上最全vscode配置使用教程 工欲善其事,必先利其器.想要优雅且高效的编写代码,必须熟练使用一款前端开发工具.但前端开发工具数不胜数,像HBuilder.Sublime Text.WebStorm ...

  8. Visual Studio Code 配置指南

    Visual Studio Code (简称 VS Code)是由微软研发的一款免费.开源的跨平台文本(代码)编辑器.在我看来它是「一款完美的编辑器」. 本文是有关 VS Code 的特性介绍与配置指 ...

  9. Visual Studio Code 配置C++环境

    Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮.智能代码补全.自定义热键.括号匹配.代码片段. ...

随机推荐

  1. ES6-Symbol的用法 ,symbol在对象中的应用,改变值

    ES6-Symbol的用法,,symbol在对象中的应用,改变值 let a = new String; let b = new Number; let c = new Boolean; let d ...

  2. google跟踪代码管理器gtm无法给相同class元素绑定click事件埋点解决

    Google 跟踪代码管理器是一个跟踪代码管理系统 (TMS),可以帮助您快速轻松地更新网站或移动应用上的跟踪代码及相关代码段(统称为“代码”).将一小段跟踪代码管理器代码添加到项目后,您可以通过网页 ...

  3. swoole1--搭建echo服务器

    1.安装swoole :pecl install swoole,然后修改php.ini 开启swoole扩展:extension=swoole.so 2.写一个服务器Server.php 1 < ...

  4. tomcat修改进程名称

    1.window平台: 打开tomcat_home\bin\setclasspath.bat文件,找到set _RUNJAVA=”%JRE_HOME%\bin\java”这一行. 将该行注释掉 ,然后 ...

  5. xadmin进行全局配置(修改模块名为中文以及其他自定义的操作步骤)

    1.实现自定义配置和收缩: 在apps->users->adminx.py中操作如下图内容  2.改成中文  操作如下图所示: 图1: 图2: run重启,刷新页面即可实现如下图: 接下来 ...

  6. Python 对列表嵌套的数据进行排序

    利用sorted(iterable[, key][, reverse]) key:指定一个接收一个参数的函数,这个函数用于从每个元素中提取一个用于比较的关键字,默认值为None(直接比较元素) rev ...

  7. Octave中的一些常用操作

    >> 5+6ans = 11>> 1~=2ans = 1 %1表示true,0表示false>> 1~=1    %1不等于1ans = 0>> a=2 ...

  8. go语言设计模式之memento

    memento.go package memento import ( "fmt" ) type State struct { Description string } type ...

  9. arp心得-caidachun

    arp地址解析协议,以前也学习过,一直有疑问,不同网段怎么解析,arp代理是什么,静态路由为什么可以配置下一跳是接口,而不是ip 1.同网段广播请求,单播应答 2.不同网络根据路由表的下一跳地址ip地 ...

  10. 0day2安全——笔记4(修改临界变量)

    第二章 修改临界变量 #include <stdio.h> #include <string.h> #define PASSWORD "1234567" i ...