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. LOJ#6282. 数列分块入门 6

    一个动态的插入过程,还需要带有查询操作. 我可以把区间先分块,然后每个块块用vector来维护它的插入和查询操作,但是如果我现在这个块里的vector太大了,我可能的操作会变的太大,所以这时候我需要把 ...

  2. mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)

    mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...

  3. bzoj2457 双端队列

    虽然分类在数据结构里,但是实际上是个贪心题...... 我自己一开始想到了一个错误的贪心.后来发现对于相等值的处理不行. 有个很神的转化,就是把排好序的队列以及对应的原下标都给搞出来. 然后考虑其中一 ...

  4. A1147. Heaps

    In computer science, a heap is a specialized tree-based data structure that satisfies the heap prope ...

  5. react-native中的navigator

    第一步安装相关插件 添加一些依赖 package com.awesomeproject; import com.facebook.react.ReactActivity; import com.fac ...

  6. mysql建立索引的几大原则

    (转)仅供自己学习,特此记录 1.选择唯一性索引 唯一性索引的值是唯一的,可以更快速的通过该索引来确定某条记录.例如,学生表中学号是具有唯一性的字段.为该字段建立唯一性索引可以很快的确定某个学生的信息 ...

  7. Linux常用基本命令(less)

    转: Linux常用基本命令(less) LESS:跟more命令的功能类似,都是用于分页显示内容,但是他的性能比more更高,功能比more更丰富,他读取文件是按需加载 格式: less [opti ...

  8. pip的更新问题

    OSX系统中在利用pip安装有些模块的时候出现”you are using pip version 9.0.1, however version 10.0.0 is available. You sh ...

  9. day14-jdbc案例(简单的curd&分页)

    回顾: mvc jsp的设计模式1: jsp+javabean jsp的设计模式2: jsp+javabean+servlet jsp:展示数据 javabean:封装数据 封装对数据的访问 serv ...

  10. ansbile Tags && Block

    Tags 官网示例:https://docs.ansible.com/ansible/2.6/user_guide/playbooks_tags.html 编写执行playbook的时候,每次修改完y ...