Question

我尝试使用react和（react）-css-modules来运行webpack，但是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上。每个加载器都使用最新版本。感谢

Answer 1

加载程序失败，因为我将.js传递给了css-loader。如果我将包含路径留空，则可以正常工作。

Webpack不会使用css-loader和（react）-css-modules

1 个答案: