vue项目笔记（6）-使用stylus

vue中使用stylus

1、stylus的安装，具体方法：运行以下命令

npm install stylus --save

npm install stylus-loader --save

2、组件中使用的时候，需要声lang="stylus"

<style lang="stylus" scoped>
</style>

3、stylus中使用变量（以背景颜色为例）

（1）、声明一个基础的样式文件varibles.styl，在需要使用的组件中引入，在该样式文件中，声明变量$bgColor = #00bcd4;,背景颜色已经设置完成。如下：

header.vue

@import '~styles/varibles.styl'
.header
  display flex
  line-height 0.86rem
  background $bgColor
  color #fff

4、vue中使用vetur插件整理代码的时候，往往会将stylus语法中的大括号，冒号，分号加上，影响我们css样式的编写。那么，怎么解决这种问题呢？具体方法如下：

打开vsCode-文件-首选项-设置，在右侧的“用户设置”中，加入以下代码，便可解决上述问题，代码风格如下

// 以下为stylus配置
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行

.header
  display flex
  line-height 0.86rem
  background $bgColor
  color #fff