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

ryan3216

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.

lucasfernog

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!

ryan3216

@lucasfernog said in How can I use Stylus`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>

metalsadman

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

ryan3216

@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 ?

metalsadman

@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 :(.

ryan3216

@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 ?

metalsadman

@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.