javascript - react 服務(wù)端渲染怎么處理less文件
問(wèn)題描述
背景:用react.js + node 實(shí)現(xiàn)react組件服務(wù)端渲染。
由于當(dāng)前 node 還不支持 import,我用nodemon --harmony server.js --exec babel-node命令執(zhí)行,其中server.js是后端入口文件,這樣是可以支持 import 了,但是當(dāng)我使用 antd 的 Button 組件時(shí)卻報(bào)不支持 @import, 因?yàn)?antd 的 button 組件導(dǎo)入了 default.less,怎樣才能解決這個(gè)問(wèn)題呢?
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);
報(bào)錯(cuò)如下:
/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...
問(wèn)題解答
回答1:https://babeljs.io/docs/usage...
https://github.com/babel/exam...
相關(guān)文章:
1. javascript - sublime快鍵鍵問(wèn)題2. javascript - immutable配合react提升性能?3. css - 寫頁(yè)面遇到個(gè)布局問(wèn)題,求大佬們幫解答,在線等,急!~4. javascript - nodejs關(guān)于進(jìn)程間發(fā)送句柄的一點(diǎn)疑問(wèn)5. Apache 已經(jīng)把網(wǎng)站根目錄的改為allow from all了,但是服務(wù)器還是不能訪問(wèn)?6. 實(shí)現(xiàn)bing搜索工具urlAPI提交7. 配置Apache時(shí),添加對(duì)PHP的支持時(shí)語(yǔ)法錯(cuò)誤8. vue.js - Vue 如何像Angular.js watch 一樣監(jiān)聽數(shù)據(jù)變化9. javascript - 移動(dòng)端上不能實(shí)現(xiàn)拖拽布局嗎?10. phpstudy8.1支持win11系統(tǒng)嗎?

網(wǎng)公網(wǎng)安備