在create-react-app中配置less、antd

首先说下版本

  "less": "^3.8.1",
   "less-loader": "^4.1.0",
  "antd": "^3.10.4",

注意不同版本遇到的问题会不一样，甚至不同版本create-react-app eject后的结果也是不一样的！

问题一

./node_modules/antd/dist/antd.css (./node_modules/css-loader??ref--6-oneOf-3- 1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js??ref--6-oneOf-3-3!./node_modules/antd/dist/antd.css)

/* autoprefixer: off */
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false);
^
Unrecognised input
in E:\face-puzzle\node_modules\antd\dist\antd.css (line 15141, column 63)

要引入对应的less

import 'antd/dist/antd.less';

问题二

https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
in E:\face-puzzle\node_modules\antd\lib\style\color\bezierEasing.less (line 110, column 0)

要在webpack.config.dev.js和webpack.config.prod.js配置less-loader的地方分别加上！！！

  options: {
    javascriptEnabled: true,
  },

然后重启项目！千万别只加在webpack.config.prod.js 然后重启项目 ！

最后附上我的配置文件和less 相关部分

// style files regexes
const cssRegex = /\.(css|less)$/;

const getStyleLoaders = (cssOptions, preProcessor) => {
  const loaders = [
require.resolve ('style-loader'),
{
  loader: require.resolve ('css-loader'),
  options: cssOptions,
},
{
  // Options for PostCSS as we reference these options twice
  // Adds vendor prefixing based on your specified browser support in
  // package.json
  loader: require.resolve ('postcss-loader'),
  options: {
    // Necessary for external CSS imports to work
    // https://github.com/facebook/create-react-app/issues/2677
    ident: 'postcss',
    plugins: () => [
      require ('postcss-flexbugs-fixes'),
      require ('postcss-preset-env') ({
        autoprefixer: {
          flexbox: 'no-2009',
        },
        stage: 3,
      }),
    ],
  },
},
{
  loader: 'less-loader',
  options: {
    javascriptEnabled: true,
  },
},
];
if (preProcessor) {
  loaders.push (require.resolve (preProcessor));
}
return loaders;
};

鬼知道我把多少个百度结果混合在一起再有现在的结果，目前看没什么问题。

吐槽一下，webpack.config.dev.js和webpack.config.prod.js 不能提取公共部分吗？还有，端口号自动获取未被占用的啊！

插件使用方式改来改去真让人头大！

antd的github直接说不是我们的问题，然后就给关了 ，大概是这样 ，生无可恋。
可能是我的方法不对...