Lesson Weekend

In the last lesson, we bundled our JS files with webpack. In this lesson, we'll use webpack to bundle our CSS files. Remember we can bundle many kinds of assets with webpack. While we'll only be working with one CSS file in our project, large scale projects, once again, might be working with many CSS files.

First, we need to add two new dependencies (again, make sure to use the correct version number!):

$ npm install [email protected] [email protected] --save-dev

If you check your package.json file, you'll see two more dev dependencies have been added.

Webpack Loaders

Next let's update our webpack.config.js file:

webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

Here we configure our module further by adding specific rules. The test line tells webpack where to look for files that use the specified loaders. Note that the test line uses a regular expression to find files with a .css extension.

A loader preprocesses our code before it's actually loaded. We need these loaders because webpack only understands JavaScript, not other assets such as CSS. The loaders will actually transform our CSS into JavaScript code so webpack can bundle it.

Let's try it out. Create a file called styles.css in your src folder.

src/styles.css
body {
  background-color: #7FDBFF;
}

Next, we need to import our css into our main.js file so it is available for webpack to bundle. To import it we'll add the following import statement:

src/main.js
import './styles.css';

...

It's time to $ npm run build. Now if we refresh the browser, we'll see our new CSS rule has been applied. No need for separate style tags in our HTML!