Webpacker: [help wanted] Using a style loader with extract_css

[sgaxr]

Is it possible to use a style loader (stylus, sass, etc.) _and_ use the extract css option in webpacker.yml?

Here's what I did (rails 5.2.2):

Created a new app:

$ rails new blarg --webpack=vue
$ cd blarg

Set extract_css to true:

# config/webpacker.yml
#...
  extract_css: true
# ...

Compile webpack:

$ bin/webpack

I now have javascript and css files like expected.

Next, I added stylus:

$ yarn add stylus stylus-loader

// config/webpack/loaders/stylus.js
module.exports = {
  test: /\.styl(us)?$/,
  loader: 'style-loader!css-loader!stylus-loader'
}

// config/webpack/environments/environment.js
// ...
const stylus = require('./loaders/stylus')
environment.loaders.append('stylus', stylus)
// ...

After running bin/webpack, you can see there are no css files.

What else do I need to do to get the extract text plugin to play nice with other style loaders?

[gauravtiwari]

Maybe we can make the loader configurable so you can insert any other css preprocessors if not using sass.

[Zeben]

I'm facing with the same issue.
I've solved this using IMHO not very good approach:
created a file config/webpack/loaders/stylus.js with the lines below:

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  test: /\.styl(us)?$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'stylus-loader'
  ]
}

... and changed a file config/webpack/environment.js:

--- environment.old.js  2019-04-22 19:38:59.176867589 +0300
+++ environment.js      2019-04-22 18:59:18.199458949 +0300
@@ -1,9 +1,10 @@
 const { environment } = require('@rails/webpacker')
 const { VueLoaderPlugin } = require('vue-loader')
 const vue =  require('./loaders/vue')
+const styl =  require('./loaders/stylus')

 environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
 environment.loaders.prepend('vue', vue)
+environment.loaders.prepend('stylus', styl)

 module.exports = environment

It didn't work unless I've added mini-css-extract-plugin into package.json via yarn package manager.
I don't know why the new version of webpacker doesn't use some similar approach in auto-mode and it needed to be manually edited. It worked without any problems in 3rd version of webpacker.

[guillaumebriday]

Could this issue be closed?