Q: play nice with file-loader & val-loader?

[jpommerening]

Hi,

I'm not exactly sure if this can, or even should work, but basically, what I'm trying to accomplish is:

require( 'style/url!file?opts!val!css!./file.css' )

1. css!: process a CSS file with the CSS loader (for resolving URLs and requiring fonts and images through the file loader)
2. val!: extract the CSS module's string-value
3. file?opts!: generate a file from the output, obtain a url
4. style/url: require the stylesheet via a <link> tag

I run into problems with the val loader, because when it's exec()ing the CSS module it is not using webpack's require (or enhanced-require for that matter) so it doesn't use the configured file loader for fonts and images. It looks like #287 is related but not sufficient for this case.

The actual config & code looks more or less like this:

webpack.config.js:

loaders: [ {
  test: /\.(css|eot|jpg|png|svg|ttf|woff|woff2)(\?.*)?$/,
  loader: 'file-loader?name=assets/[name]-[hash].[ext]'
}, {
  test: /\.css$/,
  loader: 'val-loader!css-loader'
} ]

entry.js

require( 'style/url!./style.css' );

How would you recommend to approach this problem?

[alexander-akait]

@jpommerening better ask this question in val-loader, also you can see example in https://github.com/peerigon/extract-loader how other loader works with css-loader