用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. redis命令之 ----SortedSed(有序集合)

    ZADD ZADD key score member [[score member] [score member] ...] 将一个或多个 member 元素及其 score 值加入到有序集 key  ...

  2. JVM内存溢出分析java.lang.OutOfMemoryError: Java heap space

    JVM内存溢出查询java.lang.OutOfMemoryError: Java heap space查出具体原因分为几个预备步骤 1.在运行java程序是必须设置jvm -XX:+HeapDump ...

  3. telnet 发送邮件

    telnet smtp.aliyun.com 25 // 这里用的是阿里云的smpt服务器,并且开放25端口 helo hi // 和阿里云的smtp服务器打招呼,测试是否连通 auth login ...

  4. ssh框架被淘汰的原因

    SSH就是Struts2+Spring+Hibernate. 三个组件的简单介绍 Struts2:通俗的讲就是为了完成MVC模型中的C的功能,也就是编写具体的业务逻辑的地方.从他的设计上来看就是请求到 ...

  5. JSTL+EL表达式+JSP自定义框架案例

    不会框架不要紧,我带你自定义框架 前言:这标题说的有点大了,当一回标题党,之前在学JSP的时候提到了JSTL和EL表达式,由于一直钟情于Servlet,迟迟没有更新别的,这回算是跳出来了.这回放个大招 ...

  6. ELK学习笔记之Elasticsearch删除指定日期的数据(脚本+定时任务)

    0x00 概述 目前使用的ES版本为6.3.x,经过长时间的积累,ES内数据越来越多,需要删除指定日志之前的日志. 例如只要求保留60天的日志,那么就要删除60天之前的所有索引和日志. 0x01 ES ...

  7. c# 如何获取当前方法的调用堆栈

    c# 调试程序时常常需要借助 call stack 查看调用堆栈,实际上通过code也可以获取: class Program { static void Main(string[] args) { T ...

  8. Python requests库的使用(一)

    requests库官方使用手册地址:http://www.python-requests.org/en/master/:中文使用手册地址:http://cn.python-requests.org/z ...

  9. Python基础24

    import 与 from import 知乎上说的简洁明了,zhihu.com/question/38857862 from import, 导入之后就能拿来用了,直接用!到处用!

  10. 【转载】Visual Studio中WinForm窗体程序如何切换.NET Framework版本

    在C#语言的WinForm窗体程序中,有时候我们需要切换WinForm窗体程序项目的.NET Framework版本号,例如从.NET Framework 4.5版本切换到.NET Framework ...