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. PHP中的数组

    一.数组的基础 php数组的分类 按照下标的不同,php分为关联数组与索引数组: 索引数组:下标从零依次增长(以前那种) 关联数组:下标为字符串格式,每个下标字符串与数组的值一一关联对应(有点儿像对象 ...

  2. CentOS命令登录MySQL时,报错ERROR 1045 (28000): Access denied for user root@localhost (using password: NO)错误解决方法

    1.停用mysql服务:# /etc/rc.d/init.d/mysqld stop 2.输入命令:# mysqld_safe --user=mysql --skip-grant-tables --s ...

  3. tomcat 8.0安装ssl证书,及centos7.2 的openssl升级到最新版本,及ERR_SSL_OBSOLETE_CIPHER错误解决

    openssl官网https://www.openssl.org/source/下载最新的文件 2017-Feb-16 12:03:39 openssl-1.1.0e.tar.gz 安装的时候,可能由 ...

  4. This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its de 错误解决办法

    这是我们开启了bin-log, 我们就必须指定我们的函数是否是1 DETERMINISTIC 不确定的2 NO SQL 没有SQl语句,当然也不会修改数据3 READS SQL DATA 只是读取数据 ...

  5. css 实现加载中3个点跳动

    <style type="text/css">.loading:after { overflow: hidden; display: inline-block; ver ...

  6. textarea高度自适应(转载)

    原文地址:https://blog.csdn.net/itzhongzi/article/details/73949712

  7. 【转载】PyTorch系列 (二):pytorch数据读取

    原文:https://likewind.top/2019/02/01/Pytorch-dataprocess/ Pytorch系列: PyTorch系列(一) - PyTorch使用总览 PyTorc ...

  8. P5304 [GXOI/GZOI2019]旅行者

    题目地址:P5304 [GXOI/GZOI2019]旅行者 这里是官方题解 一个图 \(n\) 点 \(m\) 条边,里面有 \(k\) 个特殊点,问这 \(k\) 个点之间两两最短路的最小值是多少? ...

  9. 部署自建CA颁发证书实现https加密

    理论忽略:百度上很多 需求:自建证书并实现域名的https加密 部署: 在linux机器上执行以下命令生成私钥 mkdir -p /opt/ssl-cert cd  /opt/ssl-cert 1.# ...

  10. css之幽灵空白节点

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...