如何使用 Webpack 3 配置 Ant Design

Question

修复及解决方案：

感谢@BoyWithSilver，长话短说，以下是我为解决问题所做的操作：

1. 添加 .less 到扩展部分
2. 删除了 webpack.config.json 中不必要的代码，例如删除了 extract-text-webpack-plugin
3. 从 3.0.1 降级到 2.7.0 修复了一堆错误：antd 中的 index.less 文件中未定义的长度。

---

更新3

这是我的 package.json

{
  "name": "mobx-reactjsx",
  "version": "1.0.0",
  "description": dfsdfsdfsd",
  "scripts": {
    "start": "webpack-dev-server --config webpack.config.js --progress --inline",
    "lint": "eslint src"
  },
  "keywords": [
    "react",
    "reactjs",
    "boilerplate",
    "mobx",
    "starter-kit",
    "firebase",
    "re-base"
  ],
  "author": "Winston Fan",
  "license": "MIT",
  "homepage": "https://horizontalvision.azurewebsites.net/",
  "devDependencies": {
    "autoprefixer": "^8.0.0",
    "babel-core": "^6.9.1",
    "babel-loader": "^7.1.2",
    "babel-plugin-import": "^1.6.4",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-1": "^6.5.0",
    "css-loader": "^0.28.9",
    "extract-text-webpack-plugin": "^3.0.2",
    "less": "^3.0.1",
    "less-loader": "^4.0.5",
    "less-vars-to-js": "^1.2.1",
    "postcss-loader": "^2.1.0",
    "style-loader": "^0.20.2",
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.7.1"
  },
  "dependencies": {
    "antd": "^3.2.1",
    "firebase": "^4.9.1",
    "mobx": "^3.5.1",
    "mobx-react": "^4.4.1",
    "mobx-react-devtools": "^4.2.15",
    "re-base": "^3.2.2",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  }
}

---

更新2：

1. 删除 context 选项后： // context: path.resolve(__dirname, 'dist'), inpage.config.js

2. 添加

   javascriptEnabled: 在 webpack.config.json 的 less-loader 下为 true

我收到这些错误。

./node_modules/antd/lib/button/style/index.less 中的错误模块构建失败：

/* stylelint-disable 声明-bang-space-before,no-duplicate-selectors */ ^ 无法读取 F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color 中未定义的属性“length” \bezierEasing.less (第1行，第-1列) @ ./node_modules/antd/lib/button/style/index.js 5:0-23 @ ./src/index.js @ multi (webpack)-dev-server /客户？http://localhost:8080 ./src/index.js

./node_modules/antd/lib/style/index.less 中的错误模块构建失败：

/* stylelint-disable 声明-bang-space-before,no-duplicate-selectors */ ^ 无法读取 F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color 中未定义的属性“length” \bezierEasing.less （第 1 行，第 -1 列）@ ./node_modules/antd/lib/button/style/index.js 3:0-33 @ ./src/index.js @ multi (webpack)-dev-server /客户？http://localhost:8080 ./src/index.js

./node_modules/antd/lib/style/index.less 中的错误模块构建失败：ModuleBuildError：模块构建失败：

/* stylelint-disable 声明-bang-space-before,no-duplicate-selectors */ ^ 无法读取 F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color 中未定义的属性“length” \bezierEasing.less (第 1 行，第 -1 列) 在 runLoaders (F:\temp\Playground\mobx-reactjsx\node_modules\webpack\lib\NormalModule.js:195:19) 在 F:\temp\Playground\mobx- Reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:364:11 在 F:\temp\Playground\mobx-reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:230:18 在 context.callback (F :\temp\Playground\mobx-reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:111:13) 在 process._tickCallback (internal/process/next_tick.js:169:7) @ ./node_modules/antd /lib/style/index.less @ ./node_modules/antd/lib/button/style/index.js @ ./src/index.js @ multi (webpack)-dev-server/client？http://localhost:8080 ./src/index.js

./node_modules/antd/lib/button/style/index.less 中的错误 模块构建失败：ModuleBuildError：模块构建失败：

/* stylelint-disable 声明-bang-space-before,no-duplicate-selectors */ ^ 无法读取 F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color 中未定义的属性“length” \bezierEasing.less (第 1 行，第 -1 列) 在 runLoaders (F:\temp\Playground\mobx-reactjsx\node_modules\webpack\lib\NormalModule.js:195:19) 在 F:\temp\Playground\mobx- Reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:364:11 在 F:\temp\Playground\mobx-reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:230:18 在 context.callback (F :\temp\Playground\mobx-reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:111:13) 在 process._tickCallback (internal/process/next_tick.js:169:7) @ ./node_modules/antd /lib/button/style/index.less @ ./node_modules/antd/lib/button/style/index.js @ ./src/index.js @ multi (webpack)-dev-server/client？http://localhost:8080 ./src/index.js 子 extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/less-loader/dist /cjs.js??ref--1-2!node_modules/antd/lib/style/index.less: [0] ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js？ {"modifyVars":{"@primary-color":"#193D71"},"root":"F://temp//Playground//mobx-reactjsx","javascriptEnabled":true}!./node_modules/ antd/lib/style/index.less 302 字节 {0} [构建] [失败] [1 个错误]

ERROR in ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js?{"modifyVars":{"@primary-color":"#193D71"},"root":"F://temp//Playground//mobx-reactjsx","javascriptEnabled":true}!./node_modules/antd/lib/style/index.less
Module build failed:

/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
^
Cannot read property 'length' of undefined
      in F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color\bezierEasing.less

(第1行，第-1列)子extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/less-loader/dist/cjs.js?? ref--1-2!node_modules/antd/lib/button/style/index.less: [0] ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js?{"modifyVars" :{"@primary-color":"#193D71"},"root":"F://temp//Playground//mobx-reactjsx","javascriptEnabled":true}!./node_modules/antd/lib/ Button/style/index.less 302 字节 {0} [构建] [失败] [1 个错误]

ERROR in ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js?{"modifyVars":{"@primary-color":"#193D71"},"root":"F://temp//Playground//mobx-reactjsx","javascriptEnabled":true}!./node_modules/antd/lib/button/style/index.less
Module build failed:

/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
^
Cannot read property 'length' of undefined
      in F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color\bezierEasing.less

（第 1 行，第 -1 列）webpack：编译失败。

---

更新1：

这是我的 webpack.config.json

var path = require('path');
var webpack = require('webpack');
const fs  = require('fs');

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const lessToJs = require('less-vars-to-js');
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, './scripts/ant-theme-vars.less'), 'utf8'));

module.exports = {
  watch: true,
  context: path.resolve(__dirname, './src'),
  devtool: 'source-map',
  entry: [
    './src/index.js'
  ],
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new ExtractTextPlugin('style.css')
  ],
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [{
      test: /\.jsx?$/,
      use: ['babel-loader'],
      include: path.join(__dirname, 'src')
    },
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract([
          {loader: "css-loader"},
          {loader: "less-loader",
            options: {
              modifyVars: themeVariables,
              root: path.resolve(__dirname, './')
            }
          }
        ])
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: "css-loader"
        })
      },]
  }
};

现在错误消息变成：

multi (webpack)-dev-server/client 中出现错误？http://localhost:8080 ./src/index.js 找不到模块：错误：无法解析“/Users/Winston/tmp/Playground/mobx-reactjsx/src”中的“./src/index.js” @ multi (webpack)-dev-服务器/客户端？http://localhost:8080 ./src/index.js

（项目结构）

我在projectfolder/src下有index.js

---

我正在尝试将 Ant Design 与 Less 支持和按需导入功能集成在一起，该功能位于： 高级指南部分中的https://ant.design/docs/react/use-with-create-react-app 。

在本节中，它使用react-app-rewired，但我的项目使用webpack 3（我的项目基于此https://github.com/mobxjs/mobx-react-boilerplate），因此在我的情况下无法使用rewired命令。

所以我找到了另一篇文章： https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f

这是我的代码：

包.json

"start": "webpack-dev-server --hot --open",

webpack.config.json

const fs  = require('fs');

const lessToJs = require('less-vars-to-js');
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, './scripts/ant-theme-vars.less'), 'utf8'));
....
module:{
.....
rules:[
.....
test: /\.less$/,

use: [

       {loader: "style-loader"},

       {loader: "css-loader"},

       {loader: "less-loader",

options: {

modifyVars: themeVariables

         }

       }

     ]
]
}

索引.js

import {Button} from 'antd';

<Button type="primary">Hi!</Button>

.babelrc

{

"presets": [

"react",

"es2015",

"stage-1"

 ],

"plugins": [

   ["import", {"libraryName": "antd", "style": true} ],

"transform-decorators-legacy"

 ]

}

这是来自控制台的错误消息：

Answer 1

对我来说，我只需要使用import 'antd/dist/antd.min.css 而不是import 'antd/dist/antd.css

https://github.com/ant-design/ant-design/issues/33327#issuecomment-997355323