vue项目安装使用stylus步骤

安装步骤基于使用vue创建的项目

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,就可以使用stylus了。

接下来就可以使用了，使用方式分两种。一种是在.vue文件的style块中使用，一种是引用.styl文件的形式

在.vue文件的style块中使用

这个很简单，只要在style标签加上lang="stylus"就可以了，看完这例子

<style scoped lang="stylus"> .top { height: 80px; line-height: 80px; background-color: #0e5792; min-width: 800px; } .avatar float: left; width: 300px; img width: 60px; height: 60px; display: inline-block; border-radius: 30px; </style> 

外部引用.styl文件
通过css语法引入比较方便，用js模块的方式配置比较复杂

<style lang="stylus"> @import "assets/base.styl"; #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; } </style> 

stylus的语法，可以去这里看http://www.zhangxinxu.com/jq/stylus/ 张鑫旭写的还是很好的。

作者：triumphperson
链接：https://www.jianshu.com/p/c02f5f94b77e
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。