Question

我有一个webpack配置，该配置使用较少加载程序，css加载程序和样式加载程序。当我将更少的文件导入到组件文件中时，css在chrome的devTools中可见，但类名不可见。

我在Google上待了两个小时，似乎找不到任何可以解释这一点的东西。我知道我应该使用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组件中发生。

Answer 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
            }
        }
    ],
}

希望有帮助。

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

1 个答案: