Question

在React + Web Pack应用程序中，我试图使用LESS设置我的react组件的样式，但是没有应用样式，尽管我没有收到任何错误，所以我不知道在哪里看。当然，我的devDependencies包括更少，更少的加载器，CSS加载器和样式加载器。

webpack.config.js

const path = require("path");
const webpack = require("webpack");

module.exports = {
    entry: './src/index.js',
    module: {
        rules: [
             {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: [
                    "babel-loader",
                    "eslint-loader"
                ]
            },
            {
                test: /\.(c|le)ss$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader",
                ]
            }
        ]
    },
    resolve: {
        extensions: [".js", ".jsx"],
        alias: {
            "@components": path.resolve(__dirname, "src/components"),
            "@containers": path.resolve(__dirname, "src/containers")
        }
    },
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
      ],
    devServer: {
        contentBase: './dist',
        hot: true
    }
};

components / App / App.jsx

import React from "react";
import Body from "@components/Body/Body.jsx";
import Footer from "@components/Footer/Footer.jsx";

import styles from "./App.less";

class App extends React.Component {

    render() {

        return <div className={styles.root}>
            <h1> test </h1>
            <Body />
            <Footer />
        </div>;
    }
}

export default App;

components / App / App.less

.root {
    width: 100%;
    height: 100%;
    background-color: coral;

    h1 {
        margin-top: 200px;
        color: red;
    }
}

我希望看到应用的样式，但事实并非如此。

Answer 1

我必须在Webpack配置中启用CSS Modules：

{
    test: /\.(c|le)ss$/,
    use: [
        "style-loader",
        {
            loader: 'css-loader',
            options: {
                modules: true,
                localIdentName: "[path][name]__[local]--[hash:base64:5]",
            },
        },
        "less-loader"
    ]
},

Answer 2

尝试将"root"设置为className的字符串值。

Webpack的配置方式，LESS文件的内容不会作为css-rules导出，而只会收集并呈现为style-tag。

您需要导入less文件，因此webpack知道要考虑的文件，但是您无法访问其规则或样式。因此，要使其工作，只需设置CSS类名称，以使已编译的CSS规则匹配即可。

LESS样式不适用于react + webpack应用程序中的react组件

2 个答案: