next.js 服务端渲染，引入antd.less报错？

Question

   exports = module.exports = require("../../css-loader/lib/css-base.js")(false);
      ^
Unrecognised input
      in /Users/liubin/Desktop/github/next-ssr/node_modules/antd/dist/antd.less (line 1, column 8)

求教大神

Answer 1

我也遇到这样的问题了，我是通过下面的方法解决的
修改webpack.config.dev.js和webpack.config.prod.js

1. 找到 test: /css$/ , 修改为 test: /\.(css|less)$/ ,
2. 在该对象的use数组下添加一个对象，这个对象要放在use数组的最后，我因为没有放在最后出现了这个问题
   {
   loader: require.resolve("less-loader"),
   },
3. 在exclude数组中添加一个数组项 /.(css|less)$/
4. yarn run start

Answer 2

1,首先确认引入了less,less-loader依赖
2,修改webpack的配置
如下,对比下config文件,添加一下,要注意file这个loader,默认是没有加载less文件的,我们要手动修改,让它包含加载进来,不然上面配置的编译器是不会生效的,因为less文件一开始就没有加载

module.exports = {
    ...,
    module: {
        rules: [***{
            test: /\.less$/,
            use: ["style-loader", "css-loader", "less-loader"]
        //编译方向从右到左less-loader=>css-loader=>style-loader
        }***, {
        oneOf:[
        ...,{
        loader: require.resolve('file-loader'),
              exclude: [/\.(js|mjs|jsx|ts|tsx|less)$/, /\.html$/, /\.json$/],
              options: {
                name: 'static/media/[name].[hash:8].[ext]',
              },
        }
        ]
        }
        ]
    }

Answer 3

个人网站用的next.js+antd+redux开发的
http://www.liuweibo.cn/p/206