Webpack: style-loader and css-loader not working

Question

I'm new to webpack and I just did a simple webpack config using some loaders for a react project. I want to be able to import css files like in the doc of style-loader/css-loader.

However, I cannot make it work. After several tries, I'm here asking for some help :) Am I missing something?

When I check the build folder all my code was well transpiled except from the line where I import the css file.

Here's my webpack configuration:

    const path = require('path');
    const PROD = JSON.parse(process.env.NODE_ENV || '0');

    module.exports = {
        devtool: PROD ? 'cheap-module-source-map' : 'eval',
        entry: ["./app/index.jsx"],
        output: {
            path: path.join(__dirname, "build"),
            filename: "bundle.js"
        },
        // extensions to resolve when a require is done
        resolve: {
            extensions: [".js", ".json", ".jsx"]
        },
        module: {
            // the loaders list (they are executed in the inverse order)
            rules: [
                // loader for all js and jsx files
                {
                    enforce: "pre", // make sure the eslint is used before babel
                    test: /\.js$/,
                    include: path.join(__dirname, 'app'),
                    exclude: /node_modules/,
                    loader: "eslint-loader",
                },
                {
                    test: /\.js$/,
                    include: path.join(__dirname, 'app'),
                    exclude: /node_modules/,
                    loader: "babel-loader",
                },
                // loaders for css files
                {
                    test: /\.css$/,
                    use: [ 'style-loader', 'css-loader' ]
                },
                // loaders for other files
                {
                    exclude: [/\.js$/, /\.html$/, /\.json$/],
                    options: {
                        name: 'static/media/[name].[hash:8].[ext]',
                    },
                    loader: "file-loader"
                },
            ],
        },
        plugins: PROD ? [
            // uglify the js files if in production
            new webpack.optimize.UglifyJsPlugin({
                minimize: true,
                compress: {
                    warnings: false
                }
            })
        ] : []
    };

And here's my js file which imports a simple style.css file from the same directory:

import React from 'react';
import './style.css';

const App = props => {
    return [
        <h1 className="title">hello</h1>
    ]
};

export default App;

And my style.css file:

.title {
    margin-top: 20px;
}

its my project its looks like that { test: /\.css/, loader: 'style-loader!css-loader }, — Goor Lavi
I'm using the "^3.4.1" version @asubanovsky. I realized that if I use the absolute path to import the css file it works. I'm not sure if I should define some entry point for the css files too. I didn't see anything like that in the documentation. — unadivadantan

Ted Fitzpatrick Ted Fitzpatrick · Accepted Answer · 2018-07-24T20:00:36

You could try this syntax, works for me:

module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {loader: 'style-loader'},
                    {loader: 'css-loader',
                    options: { url: false } // tell css-loader to not package images referenced in css. perhaps re-activate this for base64 injection
                    },
                ] // use
            }
        ] // rules
    }, // module

Webpack: style-loader and css-loader not working

1 Answers