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

首先說下版本

  "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)了 ,大概是這樣 ,生無可戀。
可能是我的方法不對...

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容