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 / ...
随机推荐
- LeetCode 739:每日温度 Daily Temperatures
题目: 根据每日 气温 列表,请重新生成一个列表,对应位置的输入是你需要再等待多久温度才会升高超过该日的天数.如果之后都不会升高,请在该位置用 0 来代替. 例如,给定一个列表 temperature ...
- WIN7快速打开hosts方法
WIN7快速打开hosts方法 1直接运行C:\Windows\System32\drivers\etc\hosts 浏览选择notepad++打开即可 2打开notepad++打开 C:\Windo ...
- iOS13 新特性简介
目录 一.Dark Mode 暗黑模式 二.Status Bar更新 三.UIActivityIndicatorView加载视图 四.总结 一.Dark Mode 暗黑模式 1.1 iOS13推出了D ...
- picture元素的使用
前言 相信前端小伙伴们对img元素已经烂熟于心,但不知是否了解picture元素呢? 简单来说,picture元素通过包含一个或多个<source>元素和一个<img>元素再结 ...
- Neo4j 第十一篇:Cypher函数
Cypher函数是对图进行查询和操作的重要工具. 一,谓词函数 谓词函数返回true或者false,主要用于检查是否存在或满足特定的条件. 1,Exists 如果指定的模式存在于图中,或者特定的属性存 ...
- Logstash:多个配置文件(conf)
Logstash:多个配置文件(conf) 对于多个配置的处理方法,有多个处理方法: 多个pipeline 一个pipleline处理多个配置文件 一个pipeline含有一个逻辑的数据流,它从inp ...
- springboot 使用 freemarker 无法正常跳转的问题?
1.springboot 使用 freemarker 无法正常跳转的问题? 参考:https://blog.csdn.net/Lin_xiaofeng/article/details/79122053 ...
- C#中窗口关闭时没有取消事件订阅导致事件重复执行的解决方法
场景 C#中委托与事件的使用-以Winform中跨窗体传值为例: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/100150700 ...
- React的jsx语法,详细介绍和使用方法!
jsx语法 一种混合使用html及javascript语法的代码 在js中 遇到<xx>即开始html语法 遇到</xx>则结束html语法 恢复成js语法 例如: let D ...
- APS系统对制造企业到底有多重要?看完这5点你就明白了
第一个问题:需要APS吗? APS是否重要,不能从其所体现的软件工具或系统角度来说,而应该从业务角度来说.对于制造工厂和车间的运行而言,计划是核心的业务.就如同那句俗话说的,没有规矩不成方圆,领军打仗 ...