1.创建完成一个初始项目后,通过 npm install stylus -D命令,在项目内安装stylus。(注意:命令结尾 -D 即是 --save-dev 的简写形式)

2.需要安装loader,通过 npm install stylus-loader css-loader style-loader --save-dev  命令。

3.找到 webpack.base.conf.js 文件,并在其中的rules中写入配置:

{

test:/\.css$/,

loader:'style-loader!css-loader!stylus-loader'

}

4.在组件内部的style标签中,加入 lang="stylus" 即可。 <style lang="stylus"><style>

就可以使用stylus了

vue中使用stylus的更多相关文章

  1. 在vue 中使用Stylus

    概述 什么是Stylus Stylus是一个CSS预处理器. 什么是CSS预处理器 关于CSS预处理器,推荐先行阅读这篇文章:为您详细比较三个 CSS 预处理器(框架):Sass.LESS 和 Sty ...

  2. vue中使用stylus编写css

    安装步骤 cnpm install stylus --save-dev cnpm install stylus-loader --save-dev 写法如下: <style lang=" ...

  3. stylus入门教程,在webstorm中配置stylus

    转载:https://www.cnblogs.com/wenqiangit/p/9717715.html#undefined   stylus特点 富于表现力.具有健壮性.功能丰富.动态编码 不需要写 ...

  4. 在vue中使用css预编辑器

    vue中使用less 安装less依赖,npm install less less-loader --save vue中使用sass npm install --save-dev sass-loade ...

  5. 在vue组件的stylus样式总 取消search类型的input按钮中默认样式

    在vue组件的stylus样式中 取消search类型的input按钮中默认样式 记录一个坑 环境 Vue组件 使用了Stylus的CSS风格. 问题 input输入框使用了 type="s ...

  6. 在vue项目中使用stylus来实现移动端的1px

    1.目录结构(vue项目,但是并不局限于vue) 2.首先定义一个mixin.styl文件 border-1px($color) position: relative &:after disp ...

  7. 在vue中引入scss

    先npm安装stylus和stylus-loader  (我安装后,报错提示缺少stylus,所以第一步安装stylus,如果没有提示可省略第一步) 1.到 package.json ----- de ...

  8. Vue中使用webpack别名的方法

    在工作中,我们经常会写出这种代码: import MHeader from '../../components/m-header/m-header' @import "../../commo ...

  9. 解决Vue中"This dependency was not found"的方法

    今天在初始化项目中,出现了一个奇怪的情况:明明路径是对的,但是编译的时候,一直报"This dependency was not found"的错. 代码如下: import Vu ...

随机推荐

  1. Bootstrap常用样板

    http://blog.csdn.net/Star_449/article/details/76098292 1.图片样式 1.1..img-responsive: 直接为图片添加该样式,可以实现响应 ...

  2. jquery实现点击页面空白处,弹框消失

    要求:点击1,弹框2显示,点击空白处,弹框2消失 $("#AddDevices"):按钮1 $(".addDeviceBox")弹框2 //点击添加设备弹框 $ ...

  3. 从tom大叔那想着拿书的,呵呵。

    //var tgtttime = new Date("2014/05/26 09:59:30"); var tgtttime = new Date("2014/05/26 ...

  4. 「JavaScript面向对象编程指南」闭包

    闭包 JS只有函数作用域,函数外为全局变量,函数内为局部变量 绿圆是函数fn的作用域,在这范围内可访问局部变量b和全局变量a,橙圆是fn内部函数inner的作用域,此范围内可访问自身作用域内的变量c, ...

  5. safari下载中文文件名乱码

    原因:响应头设置content-disposition,主要遵循 RFC 5987标准. response.setHeader("content-disposition",&quo ...

  6. Tensorflow笔记二

    MNIST手写体识别 (Mixed National Institute of Standards and Technology database)的28*28字符识别共0-9类. 在ipython命 ...

  7. Javascrip动态添加样式,Dom操作,获取自定义属性

    var layer=document.querySelector('.layer') 添加样式: 添加单个样式: layer.style.display="block" 添加多个样 ...

  8. 高可用Redis(十一):使用redis-trib.rb工具搭建集群

    环境说明: 两台虚拟机,IP地址分别为:192.168.81.100和192.168.81.101 虚拟机系统为:CentOS 7.5 Redis为yum安装,版本为3.2 系统环境:关闭firewa ...

  9. 在ubuntu18 安装nginx过程,以及遇到的错误!

    1.下载 nginx下载的地址:https://nginx.org/en/download.html 2.解压 指定一个目录下面放置下载的文件,然后解压文件 命令:tar zxvf nginx-1.6 ...

  10. vue学习(二)