Webpack 不会使用 css-loader 和 (react)-css-modules 处理 css答案

【问题标题】：Webpack wont process css with css-loader and (react)-css-modulesWebpack 不会使用 css-loader 和 (react)-css-modules 处理 css
【发布时间】：2018-04-04 11:10:30
【问题描述】：

我试图让 webpack 使用 react 和 (react)-css-modules 运行，但 webpack 不会解析 css。这是常用的配置。

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

这是css加载器配置

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"),
    ]
});

javaScript 和 jsx 编译正常，但 css 每次都失败：

模块解析失败：意外令牌 (1:5) 你可能需要一个合适的加载器来处理这个文件类型

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")
);

我在节点 8.7.0 和 webpack 3.8.1 上。每个加载程序都使用最新版本。谢谢

【问题讨论】：

标签： css node.js reactjs webpack css-loader

【解决方案1】：

加载器失败，因为我将 .js 传递给 css-loader。如果我将包含路径留空，它会起作用。

【讨论】：