Webpack 2 - Style, CSS and Sass loaders

What you will learn:

- How to load css to your Webpack project
- How to configure Webpack 2 with Style, CSS and Sass loaders
- How to use Extract Text Webpack Plugin to generate css file

NOTE
12:32 - disabled in the ExtractTextPlugin should be disable

Working files:

Hit the like button and if we reach 100 likes in the first 24hrs from publishing, I will upload the next video straight away. No need to wait till next week. You rock!

Premium Online Courses for front end developers and designers.

[mamunmokni]

thx Peter for these amazing series, especially for spending time and effort to spread the knowledge and for free !! 👋

[oussamaladhari]

for people who are using webpack version 4
need to use mini-css-extract-plugin
it took me time to figure out the good syntax to run the sass file correctly
module: {
rules: [

{
test: /\.(sa|sc|c)ss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
]
},

Plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "app.css",
disabled: false,
allChunks: true
})
]

[azaria]

Teaching is a gift! I really appreciated how you went through this step-by-step and kept the errors to walk through. Through watching you debug I learned another way to debug similar errors. Debugging skills are invaluable to me. In addition, your highlighting any script you typed in to the bash and simultaneously walking through the docs and explaining some 'gotchas' and considerations was great. Your video setup with everything being incredibly clear and even your speech speed was perfect. Thank you!!

[setry]

I am glad you show compile errors and how to resolve them. Thanks for this series!

[griffintaimer]

There is so much to learn from these videos. The way he approaches each topic is really good. Clean and simple just the way it is supposed to be.

[hellbroth]

The syntax within the ExtractTextPlugin.extract() has changed now so for others to know use the following.

'style-loader', use: ['css-loader', 'sass-loader']})

[pvbarrows]

Cannot thank you enough. A few of my colleagues and I spent almost an entire day on this. Thank you so much great video!

[jeffreybriceno]

Very nice video. I really appreciate that you don't cut the mistakes. Errors are part of the learning.
Today I am not only learned how to use css in webpack, also I've learned what to do when versions do not fit.

Thanks you.

[kirankalvagadda]

This is very hepful, all your webpack videos are very clear and approach you took is really good.

[anand_naik]

Thank you so much, Sir! Was struggling to understand how to configure webpack for a new project i am working on, and this was very helpful. You are my webpack superhero! : ).

[GeorgeMonsour]

fwiw:

I was having difficulty when adding the style-loader.
I found the syntax I needed to succeed with style-loader follows:

==>
module: {
rules: [
{ test: /\.css$/,
use: [ { loader: 'style-loader'},
{ loader: 'css-loader'}]
}]
}

<==

Thank you very much Peter for the path you're showing us!!

[mrdeurknopp]

Hi Petr, thanks very much for the videos. They are very suitably paced and structured for webpack beginners :)

[MxSmack]

This is amazing Peter thank you for this! Learning Webpack and Node has been a mess for me but you made it a bit easier. All the best!

[mr.w]

Great series, I'd really hope to see a walkthrough of tree shaking using babel and ES6. It's been giving me some trouble lately ...

Thank you so much for putting this together!!

[podbarron]

Thanks for working through the issues. That helps a lot.

[bludblind]

Looking to migrate to Webpack 2 and found your video very helpful. Thanks!

[aurelianspodarec]

14:04 - no need to speed that up - by doing it, it makes it slower for us to follow, which is frustrating and oposite of what you tried to do with it.

But think about it from thsi way - you speed it up and we don't know what you did and how the syntax should look.

[ayepaiko]

omg, you really help me a lot on my new react project. You're the best

[artnos]

Thank you so much for this video, I hit the same erros you hit following the docs. You solved them thank you.

[NomadicBrian]

Awesome you are the dude! I was getting nervous with ExtractTextPlugin.