web-dev-qa-db-ja.com

React Antデザインスタイルが読み込まれない

私はwebpack 4xを使用しており、_ antd とbabel-plugin-importを含めようとしています。使用するようにwebpack設定を更新しました：

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

エラーは発生しないため、これは機能します。ただし、実際のアプリではスタイルが表示されないようです。私はこのように含めています：

import { Button } from 'antd'

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

それはボタンをうまくレンダリングしています、それは入って来ないスタイルだけです。スタイルが実際に含まれるようにする必要がある何か他に何かがあるかどうか、何か考えはありますか？ありがとうございました！

reactjsantd
9
dzm

antのlessファイルをlessにインポートする必要があります：

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

次に、このファイルをts/jsインデックスにインポートします。

import './less/main.less';

テーマを追加することもできます config file main.less

これは私が使用するwebpack設定です（webpack3）：

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