首先说下版本
"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;
};
鬼知道我把多少个百度结果混合在一起再有现在的结果，目前看没什么问题。
antd的github直接说不是我们的问题，然后就给关了 ，大概是这样 ，生无可恋。
可能是我的方法不对...
