Vue 集成 stylus和stylus-loader分析

符号 阅读:304 2021-03-31 12:24:44 评论:0

stylus和stylus-loader安装

cnpm i stylus -S 
cnpm i stylus-loader -S

stylus使用

一、语法不再需要括号,相比之前语法简洁

<style lang="stylus" scoped> 
.login 
  width 100% 
  height 100% 
  text-align center 
  background url('./../../images/bgc/bgc.jpg') 
  background-repeat no-repeat 
  background-size cover 
  overflow hidden 
 
  h1 
    margin-top 40% 
 
.login-from 
  width 80% 
  text-align center 
  padding 10px 
  margin 0 auto 
  box-shadow 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.19) 
 
  .btn 
    text-align center 
    margin-top 10px 
 
.slide-enter-active, .slide-leave-active 
  transition all 0.5s 
 
.slide-enter, .slide-leave-to 
  opacity 0 
  transform translate3d(100%, 0, 0) 
</style> 

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

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

$bgColor = #00bcd4

然后在组件中使用,

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

@import '~styles/varibles.styl';

使用:

.header 
    background: $bgColor

 

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号