webpack 配置 antd 样式出错

Question

想使用antd按需加载，代码如下：

import { Button } from 'antd';

.babelrc配置如下：

{
  "presets": ["es2015","react","stage-0","env"],
  "plugins": ["react-hot-loader/babel",["import", { "libraryName": "antd", "style": true }]],
  "env": {
    "production":{
      "preset":["react-optimize"]
    }
  }
}

但是会报错，

错误信息赋值如下：

ERROR in ./node_modules/antd/lib/button/style/index.less
Module parse failed:
/Users/Nealyang/Documents/code/code-work/Demo/nodejs/React-Express-Blog-Demo/node_modules/antd/lib/button/style/index.less
Unexpected character '@' (1:0) You may need an appropriate loader to
handle this file type. | @import "../../style/themes/default"; |
@import "../../style/mixins/index"; | @import "./mixin"; @
./node_modules/antd/lib/button/style/index.js 5:0-23 @
./app/containers/index.js @ ./app/index.js @ multi
react-hot-loader/patch
webpack-hot-middleware/client?path=http://127.0.0.1:3000/__webpa...
babel-polyfill ./app/index.js

我之前webpack只处理了css的样式，后来又加上了less-loader,但是依旧不行。

webpack.js代码如下：

{
                test: /\.css$/,
                exclude: /node_modules/,
                use: ['style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            localIdentName: '[name]-[local]-[hash:base64:5]',
                            importLoaders: 1
                        }
                    },
                    'postcss-loader'
                ]
            },
            {
                test: /antd.*\.less$/,
                exclude: /node_modules/,
                use: ["style-loader", {loader: 'css-loader', options: {sourceMap: 1}}, "postcss-loader", "less-loader"]
            },

查了各种解决方案，还是不行，求大神指点。ps：css我一直用的css-modules

当webpack.js配置如下

{
                test: /\.less$/,
                use: ["style-loader", 'css-loader', "postcss-loader", "less-loader"]
            },

错误如下：

Answer 1

我之前也看到过出现该问题在最下面：原因应该是您webpack的loaders配置加入了exclude(将antd资源排除其外)和include(未能将antd资源包含其内)。

//不应该exclude
exclude: /node_modules/,
//而且要include，而且要注意一下/node_modules/antd这个路径是否正确
include: path.join(__dirname, '/node_modules/antd'),

希望能帮到您。

ERROR in ./node_modules/antd/lib/style/index.css
Module parse failed: Unexpected token (12:5)
You may need an appropriate loader to handle this file type.
|  *    IE on Windows Phone and in iOS.
|  */
| html {
|   line-height: 1.15;
|   /* 1 */
 @ ./node_modules/antd/lib/button/style/css.js 3:0-32

Answer 2

webpack config

{
            test: /\.css$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1
                }
              },
              {
                loader: require.resolve('postcss-loader')
              }
            ]
          },
          {
            test: /\.less$/,
            exclude: [/src/],
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1
                }
              },
              {
                loader: require.resolve('postcss-loader')
              },
              {
                loader: require.resolve('less-loader'),
                options: { modifyVars: { '@primary-color': '#1DA57A' } }
              }
            ]
          },
          {
            test: /\.less$/,
            exclude: [/node_modules/],
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  modules: true,
                  localIdentName: '[local]_[hash:base64:8]'
                }
              },
              {
                loader: require.resolve('postcss-loader')
              },
              {
                loader: require.resolve('less-loader'),
                options: { modifyVars: { '@primary-color': '#1DA57A' } }
              }
            ]
          },

看了你的代码，是采用css module,就要分开配置。antd less要全局编译。

Answer 3

在css和less配置里面删除 exclude: /node_modules/,

Answer 4

感觉这好是一个大坑，处理less，不仅需要安装less-loader ,还需要安装less
https://github.com/webpack-co...

Answer 5

我也遇到了这个问题，用以下方案可以解决。
1.安装babel-plugin-import ,然后在babel的plugin配置

 rules: [
            {
                test: /\.(js|jsx)$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['react', 'es2015'],
                        cacheDirectory: true,
                        plugins: ['react-hot-loader/babel',["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]],
                    }
                },
                exclude: /node_modules/
            },
           
            }
        ]

2.配置style-loader

 {
                test: /\.css$/,loader: "style-loader!css-loader"
            },

3.对字体处理

 {
                test: /\.(eot|woff|woff2|ttf)/,
                loader: "url-loader?limit=30000&name=fonts/[hash:8].[name].[ext]"
            },

Answer 6

我也碰到类似问题了。

Failed to compile.

./node_modules/antd/lib/button/style/index.less
Module build failed:

@import "../../style/mixins/index";
@import "./mixin";
^
Can't resolve './mixin' in '/Users/wangjie19/Documents/code/websit/sitereact/node_modules/antd/lib/button/style'

  in /Users/wangjie19/Documents/code/websit/sitereact/node_modules/antd/lib/button/style/index.less (line 3, column 0)

Answer 7

同问 这个问题怎么解决呀 楼上的“在css和less配置里面删除 exclude: /node_modules/,”这个方法不管用

Answer 8

看看这里能不能帮到你

Answer 9

    test: /\.less$/,
    // include: [resolve('src')], 
    

去掉less规则下类似：
include: [resolve('src')]
exclude:/node_modules
的目录设置，antd中less文件也需要编译

Answer 10

怎么解决啊。。。。。