как настроить Ant Design с помощью Webpack 3

Исправление и решение:

Короче говоря, благодаря @BoyWithSilver вот что я сделал, чтобы исправить свои проблемы:

  1. добавлен .less в раздел расширений
  2. удалены ненужные коды в webpack.config.json, например. удален плагин extract-text-webpack
  3. downgrade less с 3.0.1 на 2.7.0 исправлена ​​куча ошибок: длина undefined в файле index.less в antd.

Обновление 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: path.resolve (__ dirname, 'dist') в webpage.config.js

  2. добавлен

    javascriptEnabled: true под less-loader в webpack.config.json

Я получил эти ошибки.

ОШИБКА в ./node_modules/antd/lib/button/style/index.less Ошибка сборки модуля:

/ * stylelint-disable декларация-bang-space-before, no-duplicate-selectors * / ^ Невозможно прочесть свойство length of undefined в F: \ temp \ Playground \ mobx-reactjsx \ node_modules \ antd \ lib \ style \ color \ bezierEasing.less (строка 1, столбец -1) @ ./node_modules/antd/lib/button/style/index.js 5: 0-23 @ ./src/index.js @ multi (webpack) -dev-server / client? http://localhost:8080 ./src/index.js

ОШИБКА в ./node_modules/antd/lib/style/index.less Ошибка сборки модуля:

/ * stylelint-disable декларация-bang-space-before, no-duplicate-selectors * / ^ Невозможно прочесть свойство length of undefined в F: \ temp \ Playground \ mobx-reactjsx \ node_modules \ antd \ lib \ style \ color \ bezierEasing.less (строка 1, столбец -1) @ ./node_modules/antd/lib/button/style/index.js 3: 0-33 @ ./src/index.js @ multi (webpack) -dev-server / client? http://localhost:8080 ./src/index.js

ОШИБКА в ./node_modules/antd/lib/style/index.less Ошибка сборки модуля: ModuleBuildError: Ошибка сборки модуля:

/ * stylelint-disable декларация-bang-space-before, no-duplicate-selectors * / ^ Невозможно прочесть свойство length of undefined в F: \ temp \ Playground \ mobx-reactjsx \ node_modules \ antd \ lib \ style \ color \ 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 * / ^ Невозможно прочесть свойство length of undefined в F: \ temp \ Playground \ mobx-reactjsx \ node_modules \ antd \ lib \ style \ color \ 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 Дочерний e xtract-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 Модуль не найден: Ошибка: не удается разрешить './src/index.js' в '/ Users / Winston / tmp / Playground / mobx-reactjsx / src' @ multi (webpack) -dev-server / client? http://localhost:8080 ./src/index.js

(структура проекта) структура проекта

У меня есть index.js в папке проекта / src

Я пытаюсь интегрировать 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

Вот мой код:

package.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

         }

       }

     ]
]
}

index.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"

 ]

}

Вот сообщения об ошибках с консоли: введите описание изображения здесь


webpack reactjs antd
person Franva    schedule 16.02.2018    source источник
comment
С какой проблемой вы столкнулись?   -  person Agney    schedule 16.02.2018
comment
@BoyWithSilverWings забыл загрузить сообщения об ошибках ›_‹; после 5 часов отладки перестал работать мозг О_О. Обновлено, пожалуйста, смотрите сообщения об ошибках   -  person Franva    schedule 17.02.2018
comment
Похоже, что загрузчик не разрешает .less файлы. Попробуйте добавить resolve: {extensions: ['.js', '.jsx', '.less']}, в файл webpack.config.js   -  person Agney    schedule 17.02.2018
comment
@BoyWithSilverWings благодарит человека, он решает одно, появляется другое.   -  person Franva    schedule 17.02.2018

Ответы (2)


arrow_upward
1
arrow_downward

Ошибка, похоже, связана с невозможностью разрешить .less файлы. Добавление этого в webpack.config.js должно помочь решить их:

resolve: {
  extensions: ['.js', '.jsx', '.less']
},

Вы указали контекст как src папку в структуре. Это означает, что запись должна быть изменена на ./index.js или просто на ./index. Если вы не хотели иметь context ключ, его удаление также будет работать.

person Agney    schedule 17.02.2018
comment
спасибо, мужик, одно решает, появляется другое. Пожалуйста, посмотрите мое обновление 1 изображение структуры моего проекта. - person Franva; 17.02.2018
comment
@Franva Какую версию less вы используете? - person Agney; 17.02.2018
comment
привет это ^ 3.0.1. Я добавил свой package.json в раздел обновления 3 - person Franva; 17.02.2018
comment
@Franva Опустите его до 2.7.0 и проверьте еще раз - person Agney; 17.02.2018
comment
сделаю это сейчас. мне нужно также понизить версию моего less-loader? Если да, то какой версии? - person Franva; 17.02.2018
comment
черт возьми ~! это решает эту проблему ~! Благодарность!!!! И последнее: стиль antd для Button (я использую Button в своем проекте) не проходит - person Franva; 17.02.2018
comment
Давайте продолжим это обсуждение в чате. - person Agney; 17.02.2018

arrow_upward
0
arrow_downward

Конфигурация Webpack (webpack.config.js):

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const fs  = require('fs');
const lessToJs = require('less-vars-to-js');
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, 'ant-theme-vars.less'), 'utf8'));
module.exports = {
  watch: true,
  context: path.resolve(__dirname, './src'),
  entry: {
    app: './index.js',
  },  
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].bundle.js',
  },
  devtool: 'source-map',
  resolve: {
    alias: {
      moment: 'moment/src/moment'
    },
  },
  module: {
    rules: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['env','react','stage-2']
        }
      },
      {
        loader: 'babel-loader',
        exclude: /node_modules/,
        test: /\.js$/,
        options: {
          presets: ['env','react','stage-2'],
          plugins: [
            ['import', { libraryName: "antd", style: true }]
          ]
        },
      },
      {
      test: /\.scss?$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          loader: 'css-loader!sass-loader'
        })
      },
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract([
          {loader: "css-loader"},
          {loader: "less-loader",
            options: {
              modifyVars: themeVariables,
              root: path.resolve(__dirname, './')
            }
          }
        ])
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf|svg|png|jpg,pdf)$/,
        loader: "file-loader"
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css')
  ],
  devServer: {
    port: 9000,
    contentBase: 'dist'
  }
};

И package.json:

{
  "name": "ant-design-app",
  "version": "1.0.0",
  "description": "Ant design",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config webpack.config.js --progress --inline",
    "build": "webpack -p --config webpack.config.js"
   },
   "repository": {
     "type": "git",
     "url": ""
   },
   "author": "Sivadass",
   "license": "MIT",
   "dependencies": {
      "antd": "^3.1.4",
      "moment": "^2.20.1",
      "react": "^16.2.0",
      "react-dom": "^16.2.0",
   },
   "devDependencies": {
      "babel-core": "^6.24.1",
      "babel-loader": "^7.0.0",
      "babel-plugin-add-module-exports": "^0.2.1",
      "babel-plugin-import": "^1.6.3",
      "babel-plugin-transform-decorators-legacy": "^1.3.4",
      "babel-preset-env": "^1.6.0",
      "babel-preset-react": "^6.24.1",
      "babel-preset-stage-2": "^6.24.1",
      "css-loader": "^0.28.9",
      "extract-text-webpack-plugin": "^2.1.2",
      "file-loader": "^0.11.2",
      "less": "^2.7.3",
      "less-loader": "^4.0.5",
      "less-vars-to-js": "^1.2.1",
      "node-sass": "^4.7.2",
      "postcss-loader": "^2.0.10",
      "sass-loader": "^6.0.6",
      "style-loader": "^0.18.2",
      "sugarss": "^1.0.1",
      "webpack": "^3.10.0",
      "webpack-dev-server": "^2.11.1"
    }
 }

Конфигурация переменных темы Ant (ant-theme-vars.less):

  @primary-color: #4099ff;
  @font-size-base: 16px;
  @font-family : "Proxima Nova", Helvetica Neue, Helvetica, Arial, sans-serif;
  @btn-font-size-lg: 15px;
  @btn-padding-lg : 8px 32px;
  @btn-padding-sm : 4px 16px;
person Sivadass N    schedule 16.02.2018
comment
спасибо Sivadass, я обновил свой webpack.config.json, и появляется новое сообщение об ошибке. Пожалуйста, посмотрите мое обновление 1. - person Franva; 17.02.2018
comment
@Sivadass N, не могли бы вы помочь, пожалуйста, https://stackoverflow.com/questions/66453633/change-ant-design-variables-using-reactjs - person Asking; 03.03.2021