vue项目中npm安装sass,less,stylus
用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的更多相关文章
- vue项目用npm安装sass包遇到的问题及解决办法
IDEA启动vue程序,浏览器访问时出现如下情况的关于node-sass的错误: 错误1: Module build failed (from ./node_modules/sass-loader/d ...
- d3.js在vue项目中的安装及案例
1. 安装: npm i d3 --save 2. 引入:main.js import * as d3 from "d3"; Vue.prototype.$d3 = d3; win ...
- cytoscape.js在vue项目中的安装及案例
1. 安装: npm i cytoscape --save 2. 引入:main.js import cytoscape from 'cytoscape'; Vue.prototype.$cytosc ...
- 【bcrypt】vue项目中bcrypt安装报错
[报错] 报错时安装方法: npm install bcrypt [解决方法] npm install bcryptjs 用 bcryptjs 替换 bcrypt 即可.
- 在vue项目中的axios使用配置记录
默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from ' ...
- vue入坑教程(二)在vue项目中如何导入element以及sass
在项目中导入element以及sass.stylus等方便开发的工具以及UI框架 (1)如何在vue项目中导入elementUI框架 elementUI是饿了么团队开发出来基于vue的前端UI框架,其 ...
- Vue项目中如何使用Element-UI以及如何使用sass
Vue项目中如何使用Element-UI以及如何使用sass 当我们在开发Vue项目的时候通常会选择Element-UI作为我们的UI框架,其官方中文文档地址是http://element.eleme ...
- vue项目中引入Sass
Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...
- 如何在Vue项目中优雅的使用sass
开始之前,请先确保有一个基于webpack模板的项目(vue-cli脚手架一键安装~) 1.打开项目终端,安装sass的依赖包 npm install --save-dev sass-loader / ...
随机推荐
- Win10修改hosts文件并配置DNS
1.打开C:\Windows\System32\drivers\etc目录 2.去掉hosts文件的只读属性 3.添加dns解析配置 127.0.0.1 www.example.c ...
- Course: ISA 414
Assignment #4Course: ISA 414Points:100Due date: November 18th, 2019, before 11:59 pmSubmission instr ...
- 移动端&PC端CSS样式兼容代码
CSS样式兼容代码 1.禁止选中复制文本 *{ user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-us ...
- 个性化你的 Git Log 的输出格式
个性化你的 Git Log 的输出格式
- C# if-else 语句
一.简介 一个 if 语句 后可跟一个可选的 else 语句,else 语句在布尔表达式为假时执行. 二.语法 If(判断条件) { 执行的代码: } else { 执行的代码: } 描述: 执行 ...
- NET 判断是否为回文
比如: 12321,第一位等于第五位,第二位等于第四位 /// <summary> /// 判断是否为回文 /// 比如:12321,第一位等于第五位,第二位等于第四位 /// </ ...
- XtraReport报表入库单数字转中文大写数字
先看看打印入库单的效果图,看如下: 客户要求合计一行,要求大写中文数字.XtraReport报表是如何做出以上图的效果呢?因为是要把数字转成大写中文数字,得先准备数字转大写中文数字的函数.因网上有很多 ...
- WEBAPI获取数据
在大学学期期间学习的从mvc中的webapi中取数据 直接看代码 首先是控制器中的 using System; using System.Collections.Generic; using Syst ...
- Python脚本1
[轮子]P123. 求最大约数,并鉴别是否为素数
- redis的对象
简介:redis并没有直接使用前面所提到的基本数据结构,而是基于基本的数据结构构造了一个对象系统.这个系统包含了字符串对象,列表对象,哈希对象,集合对象,有序集合对象五种类型的对象.每种对象都用到了至 ...