Webpack 5 CSS Walkthrough: Sass, PostCSS and more!

A thorough walkthrough of setting up different CSS configurations for Webpack 5. This includes basic CSS, SASS, PostCSS with fallbacks and autoprefixer plugins, Injected inline styles vs css files for output, and a quick Tailwind setup to top it all off. I'll be touching on development vs production setups and source maps as well, with the goal of the giving you understanding and confidence in setting up or customizing your own Webpack with whatever your CSS needs are.

00:00 - What we'll cover
01:17 - Note on Webpack basics video
01:47 - Creating the project
04:30 - Adding CSS import functionality
12:44 - Adding SASS/SCSS support
16:39 - Regex breadown for CSS + SCSS + SASS
18:36 - Outputing a .css file instead of inline css
22:00 - Sourcemaps for debugging
25:36 - PostCSS with autoprefixer and fallbacks
31:37 - Browserslist for more cross-browser control
34:00 - Adding Tailwind to show the flexibility of our setup
36:53 - Wrap-up

Webpack Basics Walkthrough:
https://www.youtube.com/watch?v=X1nxTjVDYdQ&feature=youtu.be

Repository for reference:
https://github.com/Jimmydalecleveland/webpack-starters/tree/sass-postcss

Follow Jimmy Cleveland's doings:
twitter: https://twitter.com/JimmyDCleveland
blog: https://blog.jimmydc.com/

#webpack #postcss #tailwindcss

Видео Webpack 5 CSS Walkthrough: Sass, PostCSS and more! канала Swashbuckling with Code