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 trialSonya Trachsel
13,674 PointsSass loader
For the Sass loader would the order look like so : loader: 'style-loader!css-loader!sass-loader' ?
Thank you!
2 Answers
Tom Geraghty
24,174 PointsI think I figured it out. It looks like using a "loader" (singular) on modules allows you to pipe (using !) results from one loader into the next. Whereas using the plural "loaders" in your webpack.config.js file will let you use an array with the same results (processed data is piped into the next processor in the array). Two styles of writing them as follows:
From Guil's Adding CSS Loaders video we see:
module: {
loaders: [
{
test: /\.css$/,
loader: “style-loader!css-loader”
}
]
}
Hopefully it's safe to assume adding Sass would mean adjusting that one line to:
loader: “style-loader!css-loader!sass-loader”
Or the other way we see in Isaac's Adding Styles to Your Application video like this:
module: {
loaders: [
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
}
]
}
So it looks like they should both work. There might be an industry standard but it appears like this is one of those instances where individual preference in how you write your code is ok. Anyone feel free to correct me if I'm wrong.
Alexander Nikiforov
Java Web Development Techdegree Graduate 22,175 PointsCheck the teacher's notes.
There is special workshop with SASS:
https://teamtreehouse.com/library/adding-styles-to-your-application
At 02:47 he is typing
loaders: ['style', 'css', 'sass']
Check the video for more