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
Ran ShemTov
14,148 PointsThe 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
28,102 PointsRan, 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.
Sonya Trachsel
13,674 PointsI have the same question
Ran ShemTov
14,148 PointsRan ShemTov
14,148 PointsThis is obviously the answer I was looking for. Thanks!