From the course: Learning webpack 4

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Load CSS with webpack

Load CSS with webpack

From the course: Learning webpack 4

Start my 1-month free trial

Load CSS with webpack

“

- [Instructor] In addition to loading JavaScript with Webpack, we can load CSS, Sass, and Less to style our pages. The benefit of loading CSS as a module like this is that Webpack will only bundle the styles that our app uses. We can also require or import styles for use in certain files and it will perform transformations on Sass and Less to turn it into CSS. So let's first create a simple style sheet with some simple styles. I'm going to go to the source folder and create a new file called style.css. Now, in this file, I'm going to create a simple selector for an h1 and this h1 should have a font family of Arial. It also should have color salmon, a nice pink HTML color there. All right, so over in our index JS, we want to import this. So we'll just say import style.css, perfect. Now in order to import this and load it we need a loader. So we're going to say npm install style-loader and css-loader and we're going to save these to our dev dependencies. Now finally, we want to go back…

Contents