Load Stylus library and Global sheet with vue-loader and webpack2

Question

I’m trying to migrate a project I started using bourgeon template to Quasar framework.

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 and to any vue file. 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.

---

Note In the following code, I removed the non-necessary code by ...

In webpack 2 for Quasar, the files are as follow.

---

css-utils.js

Link

Basically, it output the loaders config for vue-loader or regular style loaders, in the following form (note that I removed reference to SASS as it is not relevant here):

{ 
  css: 'vue-style-loader!css-loader',
  styl: 'vue-style-loader!css-loader!stylus-loader,
  stylus: 'vue-style-loader!css-loader!stylus-loader
}

---

webpack.base.conf.js

Link

The code portion of interest is:

module: {
  rules: [
    ...
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        postcss: cssUtils.postcss,
        loaders: merge({js: 'babel-loader'}, cssUtils.styleLoaders({
          sourceMap: useCssSourceMap,
          extract: env.prod
        }))
      }
    }
    ...
  ]
}

---

Webpack v1 config I wish to port to v2

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

---

My issue with Webpack v2

I’m not able to find a way to add the piece of code (from webpack 1 grammar) to the css-utils.js or webpack.config.base.js to make available to both vue files and styl/stylus files the Jeet and Rupture librairies and the index.styl sheet.

I went through the documentations of both vue-loader and stylus-loader, but I can't make it work.

Adding the following code in webpack.config.base.js does not work and I have no clue on what should I do. Node output me a message error that clearly states that neither Jeet/Rupture are being imported nor index.styl as it fails to reconize some variables I have defined in index.styl or syntax like +above('tablet') from Rupture.

module.exports = {
  ...
  rules: [
   ...      
  ],
  plugins: [
   ...
  new webpack.LoaderOptionsPlugin({
    minimize: env.prod,
    options: {
      context: path.resolve(__dirname, '../src'),
      ...
      stylus: {
       default: {
         use: [
          require('jeet')(),
          require('rupture')()
         ],
         import: [
           path.resolve(__dirname, '../src/styles/index.styl')
         ]
       }
      }
     }
   })
  ]
}

---

Any help will be greatly appreciated, thanks :)

Answer 1

As pointed by @Razvan Stoenescu, the following peice of code solved my problems. Thanks a lot.

module.exports = {
  ...
  rules: [
   ...      
  ],
  plugins: [
   ...
   new webpack.LoaderOptionsPlugin({
     minimize: env.prod,
    options: {
     context: path.resolve(__dirname, '../src'),
     ...
     stylus: {
        use: [
         require('jeet')(),
         require('rupture')()
        ],
        import: [
         path.resolve(__dirname, '../src/styles/index.styl')
        ]
      }
    }
  })
 ]
}