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

【问题标题】：LESS style not applied to react component in react+webpack applicationLESS 样式不适用于 react+webpack 应用程序中的反应组件
【发布时间】：2019-11-15 21:54:57
【问题描述】：

在一个 react + web pack 应用程序中，我尝试使用 LESS 设置我的 react 组件的样式，但该样式没有被应用，尽管我没有收到任何错误，所以我不知道去哪里找。当然，我的devDependencies包括less、less-loader、CSS-loader和style-loader。

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

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

【问题讨论】：

标签： reactjs webpack less

【解决方案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"
    ]
},

【讨论】：

【解决方案2】：

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

根据你的 webpack 的配置方式，LESS 文件的内容不会被导出为 css-rules，而只会被收集以呈现到 style-tag 中。

您需要导入 less-file，这样 webpack 就知道要考虑哪些文件，但您既不能访问它的规则，也不能访问它的样式。因此，要使其工作，您只需设置 CSS 类名称，以便编译的 CSS 规则匹配。

【讨论】：

这可行，但为什么我不能导入 javascript 对象？我经常看到人们这样做......
我添加了更多细节。希望对你有帮助
好的，感谢您提供的详细信息。我希望找到一个允许我将 LESS 文件导出为 CSS 规则的 webpack 配置。