安装步骤基于使用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>