No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Framework
    3
    8
    709
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • R
      ryan3216 last edited by 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.

      1 Reply Last reply Reply Quote 0
      • lucasfernog
        lucasfernog last edited by

        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!

        R 1 Reply Last reply Reply Quote 0
        • R
          ryan3216 @lucasfernog last edited by ryan3216

          @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>
          
          1 Reply Last reply Reply Quote 0
          • metalsadman
            metalsadman last edited by

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

            R 1 Reply Last reply Reply Quote 0
            • R
              ryan3216 @metalsadman last edited by 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 1 Reply Last reply Reply Quote 0
              • metalsadman
                metalsadman @ryan3216 last edited by 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 :(.

                R 1 Reply Last reply Reply Quote 0
                • R
                  ryan3216 @metalsadman last edited by 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 ?

                  1 Reply Last reply Reply Quote 0
                  • metalsadman
                    metalsadman last edited by

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

                    1 Reply Last reply Reply Quote 0
                    • First post
                      Last post