Learn how webpack handles transformations from SCSS or Sass to CSS in order to create CSS files that run in the browser. webpack also provides transforms for LESS.
- [Instructor] Webpack also provides a loader for scss.…This css language extension…that allows you to write more complex css code…using variables, mix ins, and nesting.…So lets change our style sheet…to actually be a style.scss file.…So inside of the source we're going to rename this…as style.scss.…Great.…And then I'm going to actually write some scss here…in this file.…So lets go ahead and use the variable green.…
Which we will set to the color green.…We're also going to create a variable for white…which we will set up as white.…FFFFFF.…Now once those are created…we're going to create a div selector.…And this selector is going to set the background color…of this div to be the variable green…and the color to white.…
We also want to make some changes to our index js file…because instead of importing our css file…we're actually importing scss.…So now that that is done…we're going to open our terminal window…and we're going to install a few more dependencies.…So we'll say npm install sass-loader as well as node-sass.…
- What is webpack?
- Running webpack from the command line
- Setting up loaders
- Loading CSS
- Compiling SCSS
- Using webpack plugins
Skill Level Intermediate
Workflow Tools for Web Developerswith Christina Truong1h 13m Intermediate
1. What is webpack?
2. webpack Loaders
3. webpack and CSS
4. webpack Plugins
Next steps1m 1s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.