less

Vue中如何使用less 最近发现好多小伙伴在面试的过程中会问到vue如何使用less和scss，所以我绝对更新、复习一下less；废话不多说直接进主题； 依赖下载 1、首先使用npm下载依赖； 1 npm install --save less less-loader 2、安装完成后检查是否安装成功； 1 lessc -v 3、如果安装成功后，会显示安装成功后的版本； 引用方法 1、在main.js 1 2 import less from ‘less’ Vue.use(less) 2、然后创建一个.vue文件我们开始玩耍了； 注意：独立的vue文件需要引入less 1 开始使用 1、less中变量的使用； 在less，允许我们使用以变量的形式来定义，定义方式：@k:v; 使用方式：@k; 1 2 3 4 5 6 7 8 9 10 11 此时就会有一个宽100px,高100px，背景红色的正方形显示在页面上了; 2、字符串拼接变量使用方式； 1 2 3 4 5 6 7 8 9 10 11 注意：路径需要用""包裹，@{img}这种凡是把变量引进来才能生效； 3、多层嵌套+变量计算； 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 可以看到，less可以嵌套使用，让我们一次就可以看清楚css结构

首先，让我想说的是，现在有很多的更新，网上的一些也有的没用了， 接下来让我来分享一些我的解决方法，时间：2018.12/18. 1.和网上的一样，我用的是creat-react-app创建的项目，修改主题的方式也是用的：run eject后的项目结构的webpack.config.dev.js修改 第一步： yarn run eject 　或者 npm run eject　　然后在目录结构就会多一个文件夹 我们要修改的webpack.config.dev.js（开发时）和webpack.config.prod.js（打包时）文件， 但是还要下载几个插件 1.下载babel-plugin-import 2.下载less和less-loader 1.npm install babel-plugin-import -s 或者 yarn add babel-plugin-import 　　 2. npm install -s less //less-loader npm install --save-dev less-loader less 或者 yarn add less //less-loader yarn add less-loader 　　3.类似下载第三方插件的事就不多说了 进入正题。 1.打开webpack.config.dev.js 如图 先唠叨一下，网上有很多的过时了

维护css的弊端 css是一门非程序式语言，没有变量，函数，SCOPE(作用域)等概念 1、css需要书写大量看似没有逻辑的代码，css的冗余度是比较高的； 2、不方便维护以及进行拓展，不利于复用； 3、css没有很好的计算能力 Less介绍 Less(leaner style sheets)的·缩写是一门css扩展语言，也成为css预处理器，作为css的一种形式扩展语言，它并没有减少css的功能，而是在现有的css的语法基础上，为css加入程序式语言特性。 它在css的语言基础上，引入了变量，Mixin(混入)，运算以及函数功能，大大简化了css的缩写，并且降低了css的维护成本，就像它的名称一样，less可以让我们用更少的代码实现更多的事情。 less的中文网址 ;http://lesscss.cn/ 常见的css预处理器：Sass、Less、Stylus 一句话总结： Less是一门css预处理语言，它扩展了css的动态特性 在使用less之前需要进行less的安装，但是less的安装之前还需要安装nodejs，在node环境中安装less 一、less的安装 安装nodejs, 目前最新版本（12.13.1）安装网址： http://nodejs.cn/download/ 检查是否安装成功，使用cmd命令（window10是 window+r打开 运行输入cmd）---输入

初学less的总结 less 使用前准备步骤 如何使用 less less 全局变量的配置 写在最后 less 使用前准备步骤 首先使用 npm 下载依赖 npm install --save less less-loader 在配置文件 webpack.dev.conf.js 中配置(若通过 vue-cli 来构建项目，这一步是可以省略的) module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) } 两种引用方法 在 vue 文件中的 style 标签中添加 lang="less"即可在标签中使用 less <style lang="less"></style> 外部引入 less <style lang="less">@import "../../index.less"</style> 如何使用 less 定义变量及嵌套使用 定义方式：@k:v; 使用方式：@k; <div class="hello"> <span>hello world</span> </div> <style scoped lang="less"> @bg: #1457b2; @k: 100px; .hello { background: @bg; width: @k;