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 / ...
随机推荐
- Springboot使用ehcache缓存
本文部分步骤继承于springboot使用cache缓存,如果有不清楚的,请移驾springboot使用cache缓存 ehcache是一种广泛使用的开源Java分布式缓存.主要面向通用缓存,Java ...
- (二十七)golang-排序和查找
排序:将一组数据,依据指定的顺序进行排列 (1)内部排序:将数据加载在内存中进行排序: 交换排序(冒泡排序,快速排序)冒泡排序实现: 快速排序实现 (2)外部排序:数据量过大,无法全部加载到内存中,需 ...
- LeetCode 328:奇偶链表 Odd Even Linked List
给定一个单链表,把所有的奇数节点和偶数节点分别排在一起.请注意,这里的奇数节点和偶数节点指的是节点编号的奇偶性,而不是节点的值的奇偶性. 请尝试使用原地算法完成.你的算法的空间复杂度应为 O(1), ...
- nginx rewrite重写规则简明笔记
nginx rewrite重写规则简明笔记 比方说http://newmiracle.cn/?p=888我要改成能这个访问http://newmiracle.cn/p888/ 首先用正则获取888 ^ ...
- matplotlib画图相关
一. plt显示一副图像 1. import matplotlib.pyplot as plt 2. plt.figure() # 图像名称 3. plt.ims ...
- Mongodb的常用语句
模糊查询 regex(".*?\\"+questionContent+".*") String questionContent = "需求" ...
- 在 .NET Core 中使用异步的 ADO.NET 的简单示例
直接贴代码: Program.cs using Microsoft.Extensions.Configuration; using System; using System.Data; using S ...
- Knative 初体验:CICD 极速入门
Knative 社区很早就在讨论用 Tekton 替换 Build 模块的相关事宜.Knative Build 官方已经正式说明不再建议使用 Knative Build 了. 如果你知道 Knativ ...
- virt-install命令---详解
virt-install命令 一般选项:指定虚拟机的名称.内存大小.VCPU个数及特性等: -n NAME, --name=NAME:虚拟机名称,需全局惟一: -r MEMORY, --ram=MEM ...
- XMind破解版,2019年8月好使
越来越多的公司用思维导图了,进行编写测试用例,以下为破解版,亲身实验才发 的 ,中国时间2019年8月5日 下载安装包: 链接:https://pan.baidu.com/s/1-ubJLPSEpH ...