Heim  >  Artikel  >  Web-Frontend  >  Was soll ich tun, wenn „react antd' keinen Stil hat?

Was soll ich tun, wenn „react antd' keinen Stil hat?

藏色散人
藏色散人Original
2022-12-28 11:19:592098Durchsuche

React antd hat keine Stillösung: 1. Fügen Sie das antd-Stilpaket in die äußerste Komponente des Projekts ein, z. B. „@import '~antd/dist/antd.css';“ 2. Führen Sie „[ im Webpack“ ein Konfiguration 'import', { Bibliotheksname: 'antd', Stil: 'css' }],".

Was soll ich tun, wenn „react antd' keinen Stil hat?

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Was soll ich tun, wenn React Antd keinen Stil hat?

Das Problem, dass die in das React-Projekt eingeführte antd-Komponente keinen Stil hat

Offensichtlich gibt es zwei Möglichkeiten, es zu lösen:

1. Führen Sie das antd-Stilpaket in das äußerste ein Komponente des Projekts

Wie in „Hinzufügen“

@import '~antd/dist/antd.css';

2. Die Webpack-Konfiguration wird oben in App.css eingeführt

module.exports = {
    entry: {
        index: path.join(srcPath, 'index.js'),
    },
    module: {
        rules: [
            // babel-loader
            {
                test: /\.(js|jsx)$/,
                loader: ['babel-loader?cacheDirectory'],// 开启缓存
                include: srcPath,
                // exclude: /node_modules/
                loader: require.resolve('babel-loader'),
                options: {
                    plugins: [
                        // 引入样式为 css
                        // style为true 则默认引入less
                        ['import', { libraryName: 'antd', style: 'css' }],
                    ]
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'index.html'),
            filename: 'index.html'
        })
    ]
}

Empfohlenes Lernen: „Video-Tutorial reagieren

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn „react antd' keinen Stil hat?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn