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

问题描述

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

组件/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;

组件/App/App.less

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

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

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

标签： reactjswebpackless

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

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

问题描述

解决方案

推荐阅读