web-dev-qa-db-fra.com

React Ant Design styles not loading

J'utilise webpack 4x et j'essaie d'inclure antd avec babel-plugin-import. J'ai mis à jour ma configuration webpack pour utiliser:

    {
      test: /\.less$/,
      include: [/[\\/]node_modules[\\/].*antd/],
      use: [
        'css-loader',
        {
          loader: 'less-loader',
          options: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true
          }
        }
      ]
    },

Cela fonctionne, car il ne génère aucune erreur. Cependant, les styles ne semblent pas apparaître dans l'application réelle. J'inclus comme ça:

import { Button } from 'antd'

class App extends Component {
  render() {
    return <Button type="primary">Button</Button>
  }
}

Cela rend le bouton très bien, ce ne sont que les styles qui ne viennent pas. Une idée s'il y a autre chose à faire pour que les styles soient réellement inclus? Je vous remercie!

reactjsantd
9
dzm

vous devez importer le moins de fichier d'antd en moins:

//main.less
@import "~antd/dist/antd.less";

puis importez ce fichier dans l'index ts/js:

import './less/main.less';

vous pouvez également ajouter le thème fichier de configuration dans main.less

Voici la configuration du webpack que j'utilise (webpack3):

,{
                test: /\.less$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: 'theme.css'
                    }
                },{
                    loader: 'less-loader',
                    options: { javascriptEnabled: true }// compiles Less to CSS
                }]
          },
5
C Taque