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. input file 重复上传同一张图片失效的解决办法

    解决方法: 每次取消图片预览后,重置input[type=’file’]的value的值 链接:https://blog.csdn.net/zd717822023/article/details/78 ...

  2. vue api学习之nextTick的理解

    对于 Vue.nextTick 方法,之前没有听说过,突然听到别人提起,貌似作用挺大.以下为学习心得.官方文档上这样定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法, ...

  3. mysql8.0卸载干净--win10

    本文介绍,在Windows10系统下,如何彻底删除卸载MySQL... 1>停止MySQL服务开始->所有应用->Windows管理工具->服务,将MySQL服务停止.2> ...

  4. winform窗体嵌套HTML页面,开发出炫彩桌面程序

    一:CEF全称Chromium Embedded Framework,是一个基于Google Chromium 的开源项目.Google Chromium项目主要是为Google Chrome应用开发 ...

  5. UTF-8字符C2A0引起的问题

    今天遇到一个问题: 网页上的一段文字中有几个空格,把这段文字当作文件名称保存为一个windows系统下的文件后,文件名中本来是空格的地方变成了问号,另外一个C#程序打开这个文件,也提示找不到文件. 初 ...

  6. iTOP-4418/6818开发板用户使用手册内容有哪些

                    更多内容分享,请继续期待 iTOP-6818开发板与4418开发板共兼容同一底板: 核心板:::::: 尺寸:50mm*60mm 高度:核心板连接器组合高度1.5mm ...

  7. 分布式系列十三: nginx

    nginx偏运维, 不过作为开发应该了解它能做什么事情, 其作为技术架构的一部分必不可少 正向代理和反向代理 正向代理是代理的客户端, 反向代理是代理的服务端. nginx就是一款可以作反向代理的we ...

  8. git本机服务器配置(三):Gitblit的安装

    1. 下载 http://www.gitblit.com/ 2. 解压下载文件 3. 配置信息 3.1 需要提前配置好java jdk环境 3.2 打开data目录下的defaults.propert ...

  9. PyCharm 项目删除

    Pycharm 删除项目具体操作如下: 1.选择菜单 File   close project 2.选择要删除的项目右上角选择× 3.找到项目所在目录,删除相应文件夹 之后再次打开pycharm 发现 ...

  10. 【Linux】常见基础命令之文件操作

    vi:编辑文件 lilip@ubuntu:~/test/page$ vi test.txt i         切换到输入模式,以输入字符. x        删除当前光标所在处的字符. :      ...