CODEWITHSUNDEEP
webpack
Shawn Mercado
Shawn Mercado

Reputation: 132

How can I get webpack to output raw css files but with everything resolved?

I have an AngularJS (v1.5) project that uses a library called angular-css to load css dynamically. It helps by loading/unloading styles as needed and makes css naming collisions much less likely. The entire project was already configured with it and it is only now being set up for Webpack.

What I want is to somehow configure webpack to resolve any url's and such in each css/scss file and place it into the build as a stylesheet with its original name, such that it still gets picked up by angular-css as intended. I tried to accomplish this with file loader, which doesn't seem to work if chained with css-loader (for resolution), and with the ExtractTextPlugin which seems to want to dump everything into one file which won't work either.

Here is the relevant part of the webpack.config.js (the commented out portion was my original attempt with file-loader) :

enter image description here

and here is a look at how its set up in a component, for clarity.

enter image description here

Upvotes: 0

Views: 667

Answers (1)

lukas-reineke
lukas-reineke

Reputation: 3322

You can put extract-loader between the sass-loader and file-loader to evaluate on the fly. This should resolve everything before file-loader puts it in a file.

Upvotes: 1

Related Questions