How to render CSS using webpack

Question

I'm new to all this, so I apologise in advance if my question seems stupid. I'm having trouble including my CSS file using webpack. My webpack.config.js file looks like this

const HTMLWebpackPlugin = require('html-webpack-plugin');
const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: __dirname + '/app/index.js',
    resolve: {
        modules: [__dirname, 'node_modules']
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
            }
        ]
    },
    output: {
        filename: 'transformed.js',
        path: __dirname + '/build'
    },
    plugins: [
        HTMLWebpackPluginConfig,
        new ExtractTextPlugin('styles.css')
    ]
};

When webpack does its thing, my CSS file is not included. I've gone through five or six different tutorials dealing with html-webpack-plugin and different loaders but I can't get it to work.

rickjerrity · Accepted Answer · 2018-02-06 23:59:02Z

2

Try using both css-loader and style-loader together, instead of falling back to one. Like so:

{ test: /\.css$/, use: ['style-loader', 'css-loader'] }

CSS loader makes sure to load any necessary imports and files, while style-loader should actually inject the CSS into the webpage.

Taken from the style-loader docs: https://github.com/webpack-contrib/css-loader#usage

answered Feb 6, 2018 at 23:59

rickjerrity

8141 gold badge9 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jmarq · Accepted Answer · 2018-02-07 00:03:32Z

1

Are you requiring/importing the CSS file into your entry point file (or any of the files imported by the entry point)? As in import './file.css';

answered Feb 7, 2018 at 0:03

jmarq

1864 bronze badges

2 Comments

webnoob Over a year ago

Please don't ask questions as answers. They should be done in the comments.

jmarq Over a year ago

Sorry, new at StackOverflow. I had a feeling that was the case, but I didn't have the "reputation" to comment on posts other than mine. I will keep this in mind, thanks.

Collectives™ on Stack Overflow

How to render CSS using webpack

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related