antd引入样式问题记录

本篇文章基于webpak基础配置这篇文章来的，其他相关配置请参照webpack配置指南这篇文章

"antd": "^4.8.4"

在使用antd的组件时，发现没有样式。于是尝试使用按需加载的方式引入组件

npm i babel-plugin-import -D

.babelrc文件增加配置

["import", { 
            "libraryName": "antd",
            "libraryDirectory": "lib",  // libraryDirectory 默认为 lib
            "style": true // 这里还可以设置为css，less
        }, "antd"]

此时我的webpack的loader配置

	{
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
                exclude: /node_modules/
            },

运行报错： Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See webpack.js.org/concepts#lo… 因为按需加载将style设置为了true，此时会采用less，而webpack没有配置任何关于less的处理 运行：

npm i less-loader -D

增加配置:

	    {
                test: /\.less$/,
                include: [path.join(__dirname, '/node_modules/antd')],
                use: [{ loader: 'style-loader'}, {loader: 'css-loader'}, {
                    loader: 'less-loader',
                }],
            },

执行npm start报错：Cannot find module 'less'

运行：

npm i less -D

执行npm start报错： // github.com/ant-design/… .bezierEasingMixin(); ^ Inline JavaScript is not enabled. Is it set in your options? 这个指示并没有用 经过排查修改了less的配置如下：

{
                test: /\.less$/,
                include: [path.join(__dirname, '/node_modules/antd')],
                use: [{ loader: 'style-loader'}, {loader: 'css-loader'}, {
                    loader: 'less-loader',
                    options: {
                        javascriptEnabled: true
                    }
                }],
            },

执行npm start报错： alidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'javascriptEnabled' 发现是less-loader版本的问题,修改版本

 npm uninstall less-loader
 npm install less-loader@5.0.0 -D

执行npm start 解决了style设置为true的问题 另外，如果没有配置less的loader，在.babelrc里直接使用style: 'css'，其实就可以解决了～