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

    Add Rupture, Jeet and stylus sheet globally

    Help
    autoprefixer postcss stylus webpack
    2
    7
    3635
    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.
    • J
      Julien76 last edited by

      Hi,

      I’m trying to migrate a project I started using bourgeon template to Quasar.
      In the process, I have to update from Webpack 1 to 2. Everything is ok except the following:

      I’m using stylus with some librairies (Rupture and Jeet) and a stylesheet where I store some variables that should be available globally. I saw another topic where the stylus sheet is manually imported in all the vue file that require it. But for this I would prefer having available globally automatically as per bourgeon template.

      I’m not able to find a way to add the following peice of code (webpack 1 grammar) to the css-utils.js:

      stylus: {
        use: [
          require('jeet')(),
          require('rupture')()
       ],
       import: [
         path.resolve(__dirname, '../src/styles/index.styl')
       ]
      }
      

      Also I don’t understand where to add the options for autoprefixer or PostCss.

      Any help will be greatly appreciated, thanks 🙂

      1 Reply Last reply Reply Quote 0
      • rstoenescu
        rstoenescu Admin last edited by

        /build/css-utils.js is the place you need to be tweaking or probably the /build/webpack.base.conf.js (on plugins: new webpack.LoaderOptionsPlugin). The overall picture is like this: You need to tell Webpack that Stylus loader must use those packages. I’d go with the second option, but you need to do some reading on the stylus webpack loader and how you should configure it for Webpack 2.

        Cheers,
        Razvan

        1 Reply Last reply Reply Quote 0
        • J
          Julien76 last edited by

          Hi,
          Thanks for your answer.
          I have been digging all morning in both vue-loader, webpack and stylus-loader, but I can’t understand how to implement it unfortunately, so I’m stuck right now 😞

          1 Reply Last reply Reply Quote 0
          • rstoenescu
            rstoenescu Admin last edited by

            Would help you but I’m overloaded with work at the moment 😞

            1 Reply Last reply Reply Quote 0
            • J
              Julien76 last edited by

              No worries, thanks for your support.
              I will post the question on Stackoverflow as well and see.
              If you find time or if any of the others have an idea on how to solve this, that would be greatly appreciated.
              If I find a solution, I would post it.

              For now, I will import the stylus files in all my components, it’s a bit hacky and I hope I’ll find a way to make it DRY.

              1 Reply Last reply Reply Quote 0
              • J
                Julien76 last edited by

                You can find the question raised here: Link to stackoverflow

                1 Reply Last reply Reply Quote 1
                • J
                  Julien76 last edited by

                  Hi,
                  Sorry for late reply, I had to step aside this issue for a few days.
                  What you posted back on Stackoverflow solved my issue.
                  Many thanks for that.

                  stackoverflow

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