Webpack 101


Importing CSS

Now that we know how transpilers work, we can include just about any file in our final bundle. Let's check out how we might be able to include a CSS file.

We will add "style-loader" and "css-loader" to our webpack config like so:

    ...
    module: {
        rules: [
            ...
            {
                test: /\.css$/,
                include: path.resolve('./'),
                use: ["style-loader", "css-loader"]
            }
        ]
    }
    ...
                
css-loader is responsible for converting of all the css files that you import into a string. style-loader then takes this string and inserts them into a style tag at the head of yout html page.