首先說下版本
"less": "^3.8.1",
"less-loader": "^4.1.0",
"antd": "^3.10.4",
注意不同版本遇到的問題會不一樣,甚至不同版本create-react-app eject后的結(jié)果也是不一樣的!
問題一
./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)
要引入對應(yīng)的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 相關(guān)部分
// 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;
};
鬼知道我把多少個百度結(jié)果混合在一起再有現(xiàn)在的結(jié)果,目前看沒什么問題。
antd的github直接說不是我們的問題,然后就給關(guān)了 ,大概是這樣 ,生無可戀。
可能是我的方法不對...