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样式的更多相关文章

  1. vue项目中打包编译后,CSS样式【-webkit-box-orient: vertical】打包后丢失问题

    最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了 ...

  2. react中怎么写css样式?

    JSX基本语法中关于react如何写css样式主要有三种方法 1.基于class --(className) 基于className ,通过className在style中给该class名的DOM元素 ...

  3. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

  4. vue cli中的env详解

    前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...

  5. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  6. Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer

    问题描述: Vue-Cli 3.x 默认开启了 autoprefixer,但对于在 main.js 中通过 import 引入的 CSS 并没有自动添加前缀 分析原因: autoprefixer 在项 ...

  7. 后端数据中含有html标签和css样式,前端如何转译展示样式效果。

    后端含有html标签和css样式的数据: domain="<span style='color:red'>www.baidu.com</span>" (vu ...

  8. Vue项目中引入外部文件(css、js、less)

    例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步 ...

  9. scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?

    css的预编译: 使用步骤: 第一步:用npm下三个loader(sass-loader.css-loader.node-sass): 第二步:在build目录找到webpack.base.confi ...

随机推荐

  1. 【原创】hdu1698 Just a Hook(线段树→区间更新,区间查询)

    学习线段树第二天,这道题属于第二简单的线段树,第一简单是单点更新,这个属于区间更新. 区间更新就是lazy思想,我来按照自己浅薄的理解谈谈lazy思想: 就是在数据结构中,树形结构可以线性存储(线性表 ...

  2. [NOI2014]购票(斜率优化+线段树)

    题目描述 今年夏天,NOI在SZ市迎来了她30周岁的生日.来自全国 n 个城市的OIer们都会从各地出发,到SZ市参加这次盛会. 全国的城市构成了一棵以SZ市为根的有根树,每个城市与它的父亲用道路连接 ...

  3. IncDec Sequence(差分)

    题意:给定一个序列,可以对一个区间进行加1或减1的操作,问最少需要多少次可以将序列的值一样. Solution 我们将序列差分,得到一个差分数组. 对于每一个区间操作,我们可以把它转化为在查分数组上某 ...

  4. Java线程池中submit()和execute之间的区别?

    一: submit()方法,可以提供Future < T > 类型的返回值. executor()方法,无返回值. execute无返回值 public void execute(Runn ...

  5. WinterAndSnowmen

    https://vjudge.net/problem/TopCoder-12891 暴力想法是:dp[i][s1][s2]前i个,第一个集合xor是s1,第二个集合xor是s2方案数O(n^3) 有x ...

  6. Vue--组件嵌套

    1.全局注册: 组件放到components文件夹内,建议组件名是什么行为的name名就是什么 main.js 引入组件:import Users from '组件位置' 注册全局组件:Vue.com ...

  7. Linux命令模拟Http的get或post请求

    Http请求指的是客户端向服务器的请求消息,Http请求主要分为get或post两种,在Linux系统下可以用curl和wget命令来模拟Http的请求. get请求: 1.使用curl命令: cur ...

  8. python面向对象编程 -- 基本概念

    面向对象的编程简要概括就是将要处理的问题抽象为数据和操作的集合,用类对其进行封装.其中数据和操作都称为类的属性,它们是一般是不变的. 对类进行实例化生成我们所说的对象,对象有自己的属性.对象的属性一般 ...

  9. django2 用iframe标签完成 网页内嵌播放b站视频功能

    前言: 给自己的网站中加入视频资源,有两种方法,一种是用iframe标签引用外站资源,另一种则使用video标签,获取站内资源进行视频播放.其中前者顾名思义,是将视频资源上传到视频网站中,然后通过引用 ...

  10. myBatis:not bind 问题

    [13/07/16 03:25:44:044 CST] localhost-startStop-1 INFO pool.DruidDataSource: {dataSource-1} closed [ ...