next5.1添加antd，起项目之前引入报错。

Question

目前是这样，如果不引入antd的东西，直接启动服务，再引入antd是可以正常使用的。
但是先引入了antd，再启服务就会报错。

报错信息如下

(function (exports, require, module, __filename, __dirname) { import '../../style/index.less';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at new Script (vm.js:51:7)
    at createScript (vm.js:136:10)
    at Object.runInThisContext (vm.js:197:10)
    at Module._compile (module.js:613:28)
    at Object.Module._extensions..js (module.js:660:10)
    at Module.load (module.js:561:32)
    at tryModuleLoad (module.js:501:12)
    at Function.Module._load (module.js:493:3)
    at Module.require (module.js:593:17)
    at require (internal/module.js:11:18)
    at Object.antd/es/rate/style (/Users/barnaby/all_project/react-ssr/.next/dist/bundles/pages/webpack:/external "antd/es/rate/style"?9c3b:1:1)
    at __webpack_require__ (/Users/barnaby/all_project/react-ssr/.next/dist/bundles/pages/webpack:/webpack/bootstrap c8ec30cfbed027a9955b?3fd4:21:1)
    at Object../pages/index.js (/Users/barnaby/all_project/react-ssr/.next/dist/bundles/pages/index.js:80:77)
    at __webpack_require__ (/Users/barnaby/all_project/react-ssr/.next/dist/bundles/pages/webpack:/webpack/bootstrap c8ec30cfbed027a9955b?3fd4:21:1)
    at Object.2 (/Users/barnaby/all_project/react-ssr/.next/dist/bundles/pages/index.js:222:18)
    at __webpack_require__ (/Users/barnaby/all_project/react-ssr/.next/dist/bundles/pages/webpack:/webpack/bootstrap c8ec30cfbed027a9955b?3fd4:21:1)

next.config的配置如下

const withStylus = require('@zeit/next-stylus')
module.exports = withStylus({
  webpack(config, options) {
      config.module.rules.push(
        {
          test: /\.css$/,
          use: [{
              loader: "style-loader" // creates style nodes from JS strings
          }, {
              loader: "css-loader" // translates CSS into CommonJS
          }, { 
              loader: 'less-loader', options: { javascriptEnabled: true } 
          }]
        },
        {
          test: /\.less$/,
          use: [{
              loader: "style-loader" // creates style nodes from JS strings
          }, {
              loader: "css-loader" // translates CSS into CommonJS
          },{ 
              loader: 'less-loader', options: { javascriptEnabled: true }
          }]
        }
      )
    return config
  }
})

babel配置如下

{
  "presets": ["next/babel"],
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]
  ]
}

尝试过判断webpack的isServer，并没有作用。

包版本如下

    "@zeit/next-stylus": "0.0.1",
    "antd": "^3.4.1",
    "css-loader": "^0.28.11",
    "express": "^4.16.3",
    "less": "^3.0.1",
    "less-loader": "^4.1.0",
    "next": "^5.1.0",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "style-loader": "^0.20.3",
    "stylus": "^0.54.5"

Answer 1

问了一个群，说css不能按需加载，还是全部放在静态文件里面引入了……