Ant设计错误:"未知插件'导入'在' [..] /。babelrc'"中指定

时间:2017-03-30 01:16:05

标签: css webpack babeljs antd

我已将以下内容放入我的.babelrc:

{
  "plugins": [
    ["import", { libraryName: "antd", style: "css" }] // `style: true` for less
  ]
}

这是错误: 未知的插件"导入"在" [..] /。babelrc"

中指定

此外,我从文档中不清楚我是否必须导入CSS:

  1. 每个组件(例如DatePicker)或
  2. 如果antd / dist / antd.css只包含所有内容。
  3. 如果是1.将CSS路径作为示例的一部分会很好。

    如果是2.我在哪里把那个包括在我的App.js中?

    这些是我安装的babel包:

    "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:

    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;
    

1 个答案:

答案 0 :(得分:4)

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

中查看文档