javascript - react 服务端渲染怎么处理less文件

问题描述

问 题

背景：用react.js + node 实现react组件服务端渲染。

由于当前 node 还不支持 import，我用nodemon --harmony server.js --exec babel-node命令执行，其中server.js是后端入口文件，这样是可以支持 import 了，但是当我使用 antd 的 Button 组件时却报不支持 @import, 因为 antd 的 button 组件导入了 default.less,怎样才能解决这个问题呢？

server.js

import React, { Component } from 'react';
import { renderToString } from 'react-dom/server'
import { Button } from 'antd';

var Koa = require('koa');
var app = new Koa();
const render = require('koa-ejs');
const path = require('path');

render(app, {
  root: path.join(__dirname, 'server/view'),
  layout: 'template',
  viewExt: 'html',
  cache: false,
  debug: true
});

app.use(async function (ctx, next){
  const html = renderToString(
    <Button>hello</Button>
  );
  await ctx.render('demo', {'html': html});
});

app.keys = ['i love yuewen'];

app.listen(3000);

报错如下：

/Users/joy.hu/Sites/yue/node_modules/antd/lib/style/index.less:1
(function (exports, require, module, __filename, __dirname) { @import "./themes/default";
                                                              ^
SyntaxError: Invalid or unexpected token
    at createScript (vm.js:53:10)
    at Object.runInThisContext (vm.js:95:10)
    at Module._compile (module.js:543:28)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/joy.hu/Sites/yue/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/joy.hu/Sites/yue/node_modules/antd/lib/button/style/index.js:3:1)
[nodemon] app crashed - waiting for file changes before starting...

解决方案

已经解决了，.babelrc 设置 antd 不加载 css，然后在 html head 中引入 antd css 文件。

.babelrc

"plugins": [
    ["import", {
      "libraryName": "antd",
      "style": false
    }]
  ]

这篇关于javascript - react 服务端渲染怎么处理less文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！