How can I use Stylus`s function on global of quasar ?



  • Hi all,
    I wrote a function of stylus in local scope. It worked well.
    like this:

    // component/test.vue
    <style lang="stylus" type="text/stylus" scoped>
    px2rem(p)
      $fontSize = 37.5
      (p / $fontSize)rem
    
    .ebook
      position: relative;   // 使用相对布局
      .read-wrapper
        .mask
          .left
            flex:  1 1 px2rem(100)
            background-color #faa0b1
    </style>
    

    But if the function removed to src/css/app.styl , It didn`t work.

    // css/app.styl
    px2rem(p)
        $fontSize = 37.5
        (p / $fontSize)rem
    // component/test.vue
    <style lang="stylus" type="text/stylus" scoped>
    .ebook
        position: relative;   // 使用相对布局
        .read-wrapper
          .mask
            .left
              flex:  1 1 px2rem(100)
              background-color #faa0b1
    </style>
    

    I want to set a function on global (i.e. src/css/app.styl), and use it in local file (i.e. src/components/XXXX.vue).
    I will appreciate this if anyone help. Thanks.



  • Hi, I answered your question on your issue on Github. On the next time, please wait for it to be answer here (or post on Discord) before issuing on Github. Thank you!



  • @lucasfernog said in How can I use Stylus&#x60;s function on global of quasar ?:

    Hi, I answered your question on your issue on Github. On the next time, please wait for it to be answer here (or post on Discord) before issuing on Github. Thank you!

    Hi lucasfernog ,

    Thank you for your reply. You close my topic, but you can`t fix my issue.
    I did not paste <style> tags into the app.styl file. Maybe I did not express clear.
    Please looked at my comment. It indicated where is the code in.
    For instance,

    // css/app.styl
    px2rem(p)
        $fontSize = 37.5
        (p / $fontSize)rem
    

    The comment of “// css/app.styl” mean that the follow code is in css/app.styl .

    So, the next code is in “component/test.vue” . I want to call px2rem() in test.vue from css/app.styl . But it didn`t work.

    // component/test.vue
    <style lang="stylus" type="text/stylus" scoped>
    .ebook
        position: relative;   // 使用相对布局
        .read-wrapper
          .mask
            .left
              flex:  1 1 px2rem(100)
              background-color #faa0b1
    </style>
    


  • @ryan3216 yep function not working, maybe move everything in global, or just stick to what was working in your local.



  • @metalsadman

    Hi metalsadman , thank you for your reply.

    There is only that test function in global . I want to know how to make it work?

    And Qusasar is not support mixin function of Stylus in my recent test, isn`t it ?



  • @ryan3216 sry don’t know much bout stylus, but yeah i did try yours, and it worked only if the function is called in the global scope, but not in separate vue file like you wanted :(.



  • @metalsadman

    Hi metalsadman, Glad to see u .

    I found the reason. If the css/app.styl file would import to local component, the function can works well .

    Is there any way to automatically add the global file (css/app.styl) only once ?



  • @ryan3216 https://badacadabra.github.io/Using-global-style-rules-in-a-Vue-js-app/ found this googling, sry can’t help much bout this not really knowledgable bout webpack. Anyway, try to ask in discord chat also.


Log in to reply