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. <发条游戏设计>粗翻——序言、

    序言——————————————————————— 优雅 就像在英语里的很多单词一样,“优雅”有着一些不同意义的解释.一些习惯性的用法常常带有“美”的意思:例如“她穿着一条优雅的裙子”,代表着一种完全 ...

  2. Vue插槽的深入理解和应用

    一开始接触vue时并不知道插槽是什么,后来看了很多文章也是一知半解.然后自己手动敲了一下,在项目中实际应用一下,实在太好用了.后来做小程序后发现也能使用slot,不单单在vue中使用.我就是这么目光短 ...

  3. Nodejs一键实现微信内打开网页url自动跳转外部浏览器访问的功能

    前言 现如今微信对第三方推广链接的审核是越来越严格了,域名在微信中分享转发经常会被拦截,一旦被拦截用户就只能复制链接手动打开浏览器粘贴才能访问,要不然就是换个域名再推,周而复始.无论是哪一种情况都会面 ...

  4. python3: 自动化测试框架pytest

    最近在学习web自动化,所以在这里总结一下pytest框架. 其实pytest 和 unittest 都是自动化测试框架,但是pytest更好用一些,有以下几个优点:1)可以根据标签执行用例:2)?? ...

  5. 2018-2019-2 20175306实验二面向对象程序设计《Java开发环境的熟悉》实验报告

    2018-2019-2 20175306实验二面向对象程序设计<Java开发环境的熟悉>实验报告 面向对象程序设计-1 实验要求: 参考:> http://www.cnblogs.c ...

  6. 2018-2019-2 20165234 《网络对抗技术》 Exp0 Kali安装 Week1

    Week1 kali安装 一.下载系统镜像文件 首先下载系统镜像,进入kali官网,在Downloads中选择Download Kali Linux. 我选择的是64位版本,点击HTTP下载镜像文件. ...

  7. Beans 自动装配

    http://wiki.jikexueyuan.com/project/spring/beans-auto-wiring/spring-autowiring-byname.html

  8. java学习笔记09-类与对象

    物以类聚,人以群分,我们把具有相似特性或品质的物体归为一类. 类:类是一种模板,它描述一类对象的行为和状态. 对象:对象是类的一个实例,有状态和行为. 比如在一支nba球队中,每个球员都有球衣号码,场 ...

  9. celery 定时任务时间篇

    1.Celery加入定时任务 Celery除了可以异步执行任务之外,还可以定时执行任务.在实例代码的基础上写个测试方法: 1 #coding:utf-8 2 from celery.task.sche ...

  10. iOS 中文转拼音

    - (NSString * ) chineseToPinyin:(NSString *) chinese{ CFStringRef hanzi = (__bridge CFStringRef)(chi ...