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 / ...
随机推荐
- Java后台+数据库+Java web前端——记账本
下面是本人实现的网页版(设计思路见上一篇https://www.cnblogs.com/sengzhao666/p/10445984.html) 代码如下: 运行截图: 首页: 创建: 账本删除:(先 ...
- lanyu 激活idea
编辑 C:\Windows\System32\drivers\etc\hosts 文件,最后面加入下面两行 0.0.0.0 account.jetbrains.com 0.0.0.0 www.jetb ...
- 基于Django的Rest Framework框架的版本控制
本文目录 一 作用 二 内置的版本控制类 三 局部使用 四 全局使用 五 示例 源码分析 回到目录 一 作用 用于版本的控制 回到目录 二 内置的版本控制类 from rest_framework.v ...
- .NET使用Bogus生成大量随机数据(转载)
原文地址:https://www.cnblogs.com/sdflysha/p/20190821-generate-lorem-data.html 在演示Demo.数据库脱敏.性能测试中,有时需要生成 ...
- Win10导出查看删除已安装的证书
1.控制面板中搜索证书 2.点击管理用户证书或管理计算机证书,即可查看所有安装好的证书 3.双击即可查看证书,右键证书即可删除无效的证书 4.搜索证书,比如百度用到的根证书是GlobalSign Ro ...
- Anaconda入门教程【快速掌握】
Anaconda 使用指南 概述 很多学习python的初学者甚至学了有一段时间的人接触到anaconda或者其他虚拟环境工具时觉得无从下手, 其主要原因就是不明白这些工具究竟有什么用, 是用来做什么 ...
- PM学习笔记(一):解构产品经理
1.产品定义:什么是产品 来自百度百科(链接)的解释: 产品是指能够供给市场 [1] ,被人们使用和消费,并能满足人们某种需求的任何东西,包括有形的物品.无形的服务.组织.观念或它们的 ...
- Linux和windows下修改tomcat内存
原文地址:https://www.cnblogs.com/wdpnodecodes/p/8036333.html 由于服务器上放的tomcat太多,造成内存溢出. 常见的内存溢出有以下两种: java ...
- php中in_array函数的坑
由于PHP是弱类型语言,所以有自动类型转换 例子 $array = [0, 1, 2, '3']; var_dump(in_array('abc', $array)); //true var_dump ...
- ICP&TPS:最近邻
经过了一段时间的研bai究gei...终于可以偷得几天闲了. 这里来补个档. 无论是ICP还是TPS,缺乏锚点的前提下.你总是要通过找另一个曲面的最近的点来实现你的work beimat:点数*3,f ...