如何使用 webpack 从 less 添加类名并做出反应？答案

【问题标题】：How to add classnames from less with webpack and react?如何使用 webpack 从 less 添加类名并做出反应？
【发布时间】：2019-10-27 07:47:27
【问题描述】：

我有一个使用 less-loader、css-loader 和 style-loader 的 webpack 配置。当我将 less 文件导入组件文件时，css 在 chrome 的 devTools 中可见，但类名不可见。

我已经用谷歌搜索了几个小时，但似乎找不到任何可以解释这一点的东西。我知道我应该使用 this.props.className，但我不确定 className 是如何传播的。我也尝试过为 className 使用静态字符串。

这是我的 webpack 配置：

module: {
    rules: [
        ...
        {
            test: /\.less$/,
            use: [
                'style-loader',
                'css-loader',
                'less-loader'
            ]
        }
    ]
},

这是我的组件：

import React from 'react';
import {AppBar} from '@material-ui/core';
import '../styles/layout.less';

class Home extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <AppBar className='header'></AppBar>
        );
    }
}

export default Home;

我希望 className 是标题，但它没有显示我提供的任何类名。它只发生在 Material-UI 组件中。

【问题讨论】：

标签： reactjs less classname

【解决方案1】：

抱歉，回答迟了，最近在“antd”库和使用较少文件的主题修改方面遇到了类似的问题。我不得不将我的 webpack 配置分成两部分（用于 node_modules 和用于资源），如下所示：

{
    test: /\.less$/,
    include: /node_modules/,
    use: [
        {
            loader: 'style-loader' // creates style nodes from JS strings
        },
        {
            loader: 'css-loader', // translates CSS into CommonJs
        },
        {
            loader: "less-loader",  // compiles Less to CSS
            options: {
                javascriptEnabled: true
            }
        }
    ],
},
{
    test: /\.less$/,
    exclude: /node_modules/,
    use: [
        {
            loader: 'style-loader' // creates style nodes from JS strings
        },
        {
            loader: 'css-loader', // translates CSS into CommonJs
            options: { 
                modules: true
            } 
        },
        {
            loader: "less-loader",  // compiles Less to CSS
            options: {
                javascriptEnabled: true
            }
        }
    ],
}

希望对您有所帮助。

【讨论】：