关于css:Ant设计错误:”在[[..] /。babelrc’中指定了未知的插件’import'”

Ant Design error: “Unknown plugin 'import' specified in '[..]/.babelrc'”

我在.babelrc文件中添加了以下内容:

1
2
3
4
5
{
 "plugins": [
    ["import", { libraryName:"antd", style:"css" }] // `style: true` for less
  ]
}

这是错误:
在[[..] /。babelrc"

中指定的未知插件" import"

此外,从文档中我还不清楚我是否必须为以下项目导入CSS:

  • 每个单独的组件(例如DatePicker)或
  • 如果antd / dist / antd.css仅包含所有内容。
  • 如果为1,最好将CSS路径作为示例的一部分。

    在2.的情况下,我应该在App.js中将其包含在哪里?

    这些是我安装的babel软件包:

    1
    2
    3
    4
    5
    6
    7
    8
    "babel-core":"^6.24.0",
    "babel-eslint":"^7.2.1",
    "babel-loader":"^6.4.1",
    "babel-plugin-transform-class-properties":"^6.23.0",
    "babel-plugin-transform-decorators-legacy":"^1.3.4",
    "babel-preset-es2015":"^6.24.0",
    "babel-preset-react":"^6.23.0",
    "babel-preset-stage-0":"^6.22.0",

    这是我的webpack.config.js:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    const webpack = require('webpack');
    const path = require('path');
    const nodeModulesPath = path.resolve(__dirname, 'node_modules');

    const config = {

      // Render source-map file for final build
      devtool: 'source-map',

      // Entrypoint of the app, first JS to load
      entry: [
        path.join(__dirname, './app/index.js'),
      ],

      output: {
        path: path.resolve(__dirname,"build"), // absolute Path of output file
        filename: 'bundle.js', // Name of output file
        publicPath: '/static'
      },

      module: {
        rules: [
          {
            test: /\\.js$/, // All .js files
            exclude: [nodeModulesPath],
            use: [
              {
                loader:"babel-loader",
                options: {
                  presets: [
                   "es2015",
                   "stage-0",
                   "react",
                  ],
                  plugins: [
                   "transform-class-properties",
                   "transform-decorators-legacy"
                  ]
                }
              }
            ]
          }
        ]
      },

      plugins: [
        // Define production build to allow React to strip out unnecessary checks
        new webpack.DefinePlugin({
          'process.env':{
            'NODE_ENV': JSON.stringify('development')
          }
        }),
        // Suppress all the"Condition always true" warnings
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false
          },
          minimize: true,
        }),
      ],

    };

    module.exports = config;


    安装babel-plugin-import您可以在https://github.com/ant-design/babel-plugin-import

    中查看文档