Webpack wont process css with css-loader and (react)-css-modules

Question

im trying to get webpack running with react and (react)-css-modules but webpack wont parse the css. This is the common config.

const webpack = require("webpack"),
merge     = require("webpack-merge"),
path      = require("path"),
CleanWebpackPlugin = require('clean-webpack-plugin'),
HtmlWebpackPlugin  = require("html-webpack-plugin");

const lint    = require("./webpack.lint");
const babel   = require("./webpack.babel");
const styles  = require("./webpack.styles");

const PATH = {
    app: path.join(__dirname, "../../src/app.js"),
    build: path.join(__dirname, "../../public"),
    src  : path.join(__dirname, "../../src"),
};

const commonConfig = merge([
    {
        entry: {
            app: PATH.app
        },
        output: {
            path: PATH.build,
            filename: "[name].[ext]"
        },
        resolve: {
            extensions: [".js", ".jsx"],
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: "src/index.ejs",
                //inject: "head",
            }),
            new CleanWebpackPlugin("public", {
                verbose: true,
                root: path.resolve(__dirname, "../../")
            }),
            new webpack.HotModuleReplacementPlugin(),
        ],
    },
    lint({
        include: PATH.app,
        options: {
            plugins: ["react"],
        }
    }),
    babel({
        include: PATH.app
    }),
    styles({
        include: PATH.app
    })
]);

module.exports = (env) => {
    return commonConfig;
};

This is the css loader configuration

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

module.exports = ({include, exclude = /node_modules/, options}) => ({
    module: {
        rules: [
            {
                test: /\.s?css$/,
                include,
                exclude,
                options,
                use: ExtractTextPlugin.extract({
                        use: [
                        {
                            loader: "css-loader",
                            options: {
                                importLoaders: 1,
                                modules: true,
                                localIdentName: "[name]__[local]___[hash:base64:5]" ,
                            }
                        }, 
                        "postcss-loader", 
                        "resolve-url-loader",
                        "sass-loader"],
                        fallback: "style-loader",
                    })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css"),
    ]
});

The javaScript and jsx ist compiling properly but the css fails everytime with:

Module parse failed: Unexpected token (1:5) You may need an appropriate loader to handle this file type

import React, { Component } from "react";
import ReactDOM from "react-dom";

import styles from "./styles.css";

class App extends Component {
    render() {
        return (
            <div>
                <p>Hallo</p>
            </div>
        )
    }
}

ReactDOM.render(
    <App/>,
    document.getElementById("app")
);

Im on node 8.7.0 and webpack 3.8.1. Every loader is using the latest version. Thanks

Bossaron Bossaron · Accepted Answer · 2017-10-24T08:00:44

The loader failed because I passed a .js to the css-loader. If i leave the include path empty it works.

Webpack wont process css with css-loader and (react)-css-modules

1 Answers