CODEWITHSUNDEEP
javascriptcsswebpack
SJC
SJC

Reputation: 107

How to render CSS using webpack

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.

Upvotes: 2

Views: 366

Answers (2)

jmarq
jmarq

Reputation: 186

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';

Upvotes: 1

rickjerrity
rickjerrity

Reputation: 814

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

Upvotes: 2

Related Questions