vue-cli 构建的项目默认是不支持 less 的,需要自己添加。

首选,安装 less 和 less-loader ,在项目目录下运行如下命令

  1. npm install less less-loader --save-dev

安装成功后,打开 build/webpack.base.conf.js ,在 module.exports = 的对象的 module.rules 后面添加一段:

  1. module.exports = {
  2. // 此处省略无数行,已有的的其他的内容
  3. module: {
  4. rules: [
  5. // 此处省略无数行,已有的的其他的规则
  6. {
  7. test: /\.less$/,
  8. loader: "style-loader!css-loader!less-loader",
  9. }
  10. ]
  11. }
  12. }
  1.  

最后,在代码中的 style 标签中 加上 lang="less" 属性即可~

  1. <style lang="less">
  2.  
  3. </style>

同理可以安装stylus

  1.  

npm安装less和less-loadernpm或者stylus和stylus-loader的更多相关文章

  1. win7下安装配置nodejs、使用npm安装express

    1.下载node http://nodejs.cn/download/ 这里下载自己需要的 我的环境是win764,下载地址是:https://nodejs.org/dist/v6.2.0/win-x ...

  2. 通过npm安装 Cordova

    通过npm安装 Cordova 首先请确保你在本地已经安装了NodeJS(可以调用npm命令), 并且是联网状态的.如果不知道如何安装NodeJS, 请参考 ”四步完成NodeJS安装,配置和测试”. ...

  3. NPM安装之后CMD中不能使用

    NPM安装之后CMD中不能使用 这个情况就是path环境变量没有添加NPM 添加环境变量并重启CMD C:\Users\Mark\AppData\Roaming\npm\ 看看这个文件夹就知道为什么要 ...

  4. npm 安装 ionic cordova

    针对npm安装 ionic 和 cordova 过程很慢,且有些安装文件被墙的问题,使用如下方式解决: 1)安装cnpm npm install -g cnpm 2)然后再使用cnpm 安装 ioni ...

  5. npm安装完bower,使用时提示bower不是内部或外部命令

    归根结底还是环境变量的问题,但是配了好几次没配成功,最后就直接把装好的node里面的复制到系统创建的环境变量目录下,问题解决! 问题描述:我们安装node.js,npm,通过npm安装bower一路正 ...

  6. an'gularjs 环境搭建之NodeJS、NPM安装配置步骤(windows版本)

    NodeJS.NPM安装配置步骤(windows版本)  :http://xiaoyaojones.blog.163.com/blog/static/28370125201351501113581/ ...

  7. npm安装插件提示

    现在使用node的人群越来越多,咱也不能落后,得跟紧脚步才行. 今天使用 npm 安装插件的时候,出现以下提示,而且,安装程序看着好像终止了.而且,看到一个exit单词,就认为说安装出错了. $ np ...

  8. 执行npm安装模块的命令 Cannot find module

    npm 安装了 appium 和 appium-doctor 运行命令,appium-doctor 提示找不到模块: C:\Users\autotest>appiummodule.js:471 ...

  9. node 通过指令创建一个package.json文件及npm安装package.json

    描述包的文件是package.json文件. 一个这样的文件,里面的信息还是挺大的.我们可以放弃手动建立.为了练手我们有命令行来建一个这样的包; 完成name,varsion....license项的 ...

  10. node.js的npm安装

    我不打算引进node.js的npm安装,但发现node.js通过管理一些包npm实现,或给一个简短的npm. 1.npm什么        npm是一个node包管理和分发工具,已经成为了非官方的公布 ...

随机推荐

  1. HashMap底层

    写在前面: 频繁用到 hashcode() 和 equals() put(key, value): 先计算 key 的hashcode, 找到对应的bucket,如果这个bucket上面已有key-v ...

  2. auth mysql

    DROP TABLE IF EXISTS tky_auth_role;CREATE TABLE tky_auth_role ( roleid MEDIUMINT (8) UNSIGNED NOT NU ...

  3. iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战

    上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...

  4. Spring-framework

    1.spring注解驱动开发 官方文档 @Configuration 告诉spring这是一个配置类,配置类=配置文件 @Bean 给容器中注入一个bean,类型为返回值类型,id默认用方法名作为id ...

  5. mysql-笔记--增删改查

    查看数据库:可以使用 show databases; 命令查看已经创建了哪些数据库 指定数据库:在登录后使用 use 语句指定, 命令: use 数据库名;要对一个数据库进行操作, 必须先选择该数据库 ...

  6. python控制台输出带颜色的文字方法

    #格式: 设置颜色开始 :\033[显示方式;前景色;背景色m   注意:开头部分的三个参数:显示方式,前景色,背景色是可选参数,可以只写其中的某一个:另外由于表示三个参数不同含义的数值都是唯一的没有 ...

  7. MYSQL实战-------丁奇(极客时间)学习笔记

    1.基础架构:一条sql查询语句是如何执行的? mysql> select * from T where ID=10: 2.基础架构:一条sql更新语句是如何执行的? mysql> upd ...

  8. 10.2 Vue 环境安装

     Vue 环境安装 环境准备  nodejs 下载安装  https://nodejs.org/en/ 查看下载版本 C:\>node -v v7.6.0 C:\>npm -v 4.1.2 ...

  9. <Android基础>(三) UI开发 Part 3 RecyclerView

    RecyclerView 1)RecyclerView的基本用法 2)横向滚动和瀑布流滚动 3)注册点击事件 3.6 强大的滚动控件 RecyclerView ListView缺点: 1.不使用技巧优 ...

  10. Calendar 使用

    Calendar 类是一个抽象类,在java.util.Calendar包中,它为特定瞬间与一组诸如 YEAR.MONTH.DAY_OF_MONTH.HOUR 等 日历字段之间的转换提供了一些方法,并 ...