在用 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. GO 全面解析 json tag 篇

    在处理json格式字符串的时候,经常会看到声明struct结构的时候,属性的右侧还有反引号括起来的内容.形如: type User struct { UserId int `json:"us ...

  2. flvjs的unload(),detachMediaElement(),destroy()报错,undefined,not a function解决方案

    首先,真的被网上一堆各种转载复制粘贴坑了不少,最后直接到GitHub上flvjs的看作者的demo和docs才解决,具体如下. 1.引入flvjs文件,新建实例 var flvUrl = '直播流地址 ...

  3. 网络编程之tcp协议以及粘包问题

    网络编程tcp协议与socket以及单例的补充 一.单例补充 实现单列的几种方式 #方式一:classmethod # class Singleton: # # __instance = None # ...

  4. Mybatis的动态sql以及分页

    mybatis动态sql If.trim.foreach <select id="selectBooksIn" resultType="com.jt.model.B ...

  5. poj 3468 A Simple Problem with Integers 线段树 题解《挑战程序设计竞赛》

    地址 http://poj.org/problem?id=3468 线段树模板 要背下此模板 线段树 #include <iostream> #include <vector> ...

  6. 《深度访谈:华为开源数据格式 CarbonData 项目,实现大数据即席查询秒级响应》

    深度访谈:华为开源数据格式 CarbonData 项目,实现大数据即席查询秒级响应   Tina 阅读数:146012016 年 7 月 13 日 19:00   华为宣布开源了 CarbonData ...

  7. Aladdin and the Flying Carpet (LightOJ - 1341)【简单数论】【算术基本定理】【分解质因数】

    Aladdin and the Flying Carpet (LightOJ - 1341)[简单数论][算术基本定理][分解质因数](未完成) 标签:入门讲座题解 数论 题目描述 It's said ...

  8. redhat 安装 oracle中途遇到的问题(1)

    (1)安装到68%时出现弹出框 Error in invoking target 'install' of makefile '/home/oracle/app/oracle/product/11.2 ...

  9. 用canvas实现手写签名功能

    最近开发网站有一个需求,要求页面上有一块区域,用户能用鼠标在上面写字,并能保存成图片 base64 码放在服务器.这样的需求用 canvas 实现是最好的.需要用到 canvas 的以下几个属性: b ...

  10. CSP-S 2019初赛前后小记

    Preface 做完了初赛前的最后一场模拟赛,虽然这场做的挺好.但由于之前的一场难度很高,再加上自己犯了一些ZZ错误因此对初赛也有了一些不安之情 想起去年自己对于初赛的态度,实在是愧疚虽然去年文化课弃 ...