用vue-cli脚手架搭建出来的,默认是用标准css的。如果你想用sass,less,stylus就需要自己手动安装一下了。

进入项目文件夹,然后安装(这里以stylus为例)stylus和stylus-loader,安装后面需要加上--save-dev,这样才会被添加到packjson文件中。

npm install stylus stylus-loader --save-dev

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

(好像不加也可以,我试过不加,也能编译出来,因为在build/utils中写了,为了不必要麻烦,还是加下吧)

module.exports = {
// 此处省略无数行,已有的的其他的内容
module: {
rules: [
// 此处省略无数行,已有的的其他的规则
{
test: /\.styl$/,
loader: "style-loader!css-loader!stylus-loader",
}
]
}
}

这样在style后加上lang=stylus,就可以愉快的使用了。

<style lang='stylus' scoped><style/>

其他那2个,需要的话也是一样的安装。

vue项目中npm安装sass,less,stylus的更多相关文章

  1. vue项目用npm安装sass包遇到的问题及解决办法

    IDEA启动vue程序,浏览器访问时出现如下情况的关于node-sass的错误: 错误1: Module build failed (from ./node_modules/sass-loader/d ...

  2. d3.js在vue项目中的安装及案例

    1. 安装: npm i d3 --save 2. 引入:main.js import * as d3 from "d3"; Vue.prototype.$d3 = d3; win ...

  3. cytoscape.js在vue项目中的安装及案例

    1. 安装: npm i cytoscape --save 2. 引入:main.js import cytoscape from 'cytoscape'; Vue.prototype.$cytosc ...

  4. 【bcrypt】vue项目中bcrypt安装报错

    [报错] 报错时安装方法: npm install bcrypt [解决方法] npm install bcryptjs 用 bcryptjs 替换 bcrypt 即可.

  5. 在vue项目中的axios使用配置记录

    默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from ' ...

  6. vue入坑教程(二)在vue项目中如何导入element以及sass

    在项目中导入element以及sass.stylus等方便开发的工具以及UI框架 (1)如何在vue项目中导入elementUI框架 elementUI是饿了么团队开发出来基于vue的前端UI框架,其 ...

  7. Vue项目中如何使用Element-UI以及如何使用sass

    Vue项目中如何使用Element-UI以及如何使用sass 当我们在开发Vue项目的时候通常会选择Element-UI作为我们的UI框架,其官方中文文档地址是http://element.eleme ...

  8. vue项目中引入Sass

    Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...

  9. 如何在Vue项目中优雅的使用sass

    开始之前,请先确保有一个基于webpack模板的项目(vue-cli脚手架一键安装~) 1.打开项目终端,安装sass的依赖包 npm install --save-dev sass-loader / ...

随机推荐

  1. Lua参数绑定函数实现方法

    背景 对于某一个函数, 其被调用多次, 每次调用的入参都是一致的. 不想每次都填写参数, 如果能够定义一个新的函数, 将参数跟此函数绑定就棒哒哒了. local function pirntfunc( ...

  2. zoj 3888 线段树 ***

    卡n^2,用线段树降到nlogn 记录每个点上所覆盖线段的次小值,保证能有两条路径能走 #include<cstdio> #include<iostream> #include ...

  3. 【SQL查询日志】查看数据库历史查询记录

    --关键字:cross apply & outer apply --最后更新:2011-10-20 作者:Ronli--更新链接:http://www.cnblogs.com/ronli/ar ...

  4. 命令行连接wifi

    ubuntu没有图形界面,插入无线网卡后启动不能连接无线. 看这个帖子 http://askubuntu.com/questions/138472/how-do-i-connect-to-a-wpa- ...

  5. 【python】求水仙数

    for i in range(100, 1000): sum = 0 temp = i while temp: sum = sum + (temp%10) ** 3 temp //= 10 # 注意使 ...

  6. 第一章 工欲善其事 必先利其器—Android SDK工具(3)

    1.3没有真机一样开发--Android模拟器 有些时候,我们手头上可能并没有符合要求的Android设备.那么这时候我们是不是对调试或者开发就一筹莫展了呢?当然不是.由于我们有Android模拟器. ...

  7. 【Teradata】数值类型

     1.Decimal(n,m) 十进位小数 n为最大数值位数(取值1-38),m为小数位数(取值0-n). decimal(3,2)    -9.99 to 9.99 decimal(4,4)   - ...

  8. 【PAT】B1077 互评成绩计算(20 分)

    录入成绩,直接将所有同学给的分数相加,排序,减去最大和最小 省去了遍历一次 注意四舍五入 #include<cstdio> #include<string.h> #includ ...

  9. hdu 4964 恶心模拟

    http://acm.hdu.edu.cn/showproblem.php?pid=4964 给定语句,按照语法翻译html并输出. 就是恶心的模拟,递归搞就行了 处理id和class时,在一个'&g ...

  10. 通过DataTrigger绑定Tag属性值进行判断(.net 3.5的环境)

    如下,在UserControl中通过Tag传递不同的值,然后在Style中使用DataTrigger进行判断, <UserControl Style="{DynamicResource ...