Free views, likes and subscribers at YouTube. Now!
Get Free YouTube Subscribers, Views and Likes

Webpack 5 CSS Walkthrough: Sass PostCSS and more!

Follow
Swashbuckling with Code

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 crossbrowser control
34:00 Adding Tailwind to show the flexibility of our setup
36:53 Wrapup

Webpack Basics Walkthrough:
   • Creating and Understanding a Basic We...  

Repository for reference:
https://github.com/Jimmydalecleveland...

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

#webpack #postcss #tailwindcss

posted by smskahr