Vue项目 --- stylus安装

stylus安装

npm install stylus --save
npm install stylus-loader --save

stylus使用

一、语法不再需要括号，相比之前语法简洁了很多。

<style lang="stylus" scoped>
    .header
        display: flex
        line-height: .86rem
        background: $bgColor
        color: #fff
</style>

二、可以创建.styl扩展名的文件，然后在Vue组件的中引入，达到公用一些样式的目的。

例：在项目中使用通用背景色，在/src/assets/styles中创建varibles.styl，在其中写入代码：

$bgColor = #00bcd4

然后在组件中使用，

先引入varibles.styl，记住~一定要加:

@import '~styles/varibles.styl';

使用：

.header
    background: $bgColor