Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Adding Styles to Your Application

Ran ShemTov
Ran ShemTov
14,148 Points

The right order for loaders of webpack?

I'm trying to figure out the right order to place loaders in a loader array for webpack config.

Given the style loader for example:

{
    loaders: ["style-loader", "css-loader", "sass-loader"],
    test: /\.scss$/
},

The plugin should do the following: comple sass, and load it as css into the html as style tag. If that's so, why am I specifying "style-loader" first, "css-loader" second and "sass-loader" last?

Is there any meaning to the order of these loaders?

2 Answers

Tina Maddox
Tina Maddox
28,102 Points

Ran, In researching your question I found help in the webpack docs. Below is the statement which will help with understanding regarding the order of loaders.

require("style-loader!css-loader!less-loader!./my-styles.less");

When chaining loaders, they are applied right to left (from the file, back). In the above example, my-styles.less will be transformed first by the less-loaderconverting it to css, and then passed to the css-loader where urls, fonts, and other resources are processed, and then finally passed to style-loader to be transformed into a <style> tag.

Ran ShemTov
Ran ShemTov
14,148 Points

This is obviously the answer I was looking for. Thanks!

I have the same question