关于服务端渲染,组件中存在css @import的问题

1.需要服务端渲染,目前只做了简单的一些处理,遇到了一些问提,server.js部分代码如下:

const koa = require('koa');
const views = require('koa-views');
const statics = require('koa-static');
const router = require('koa-router')();

import React from 'react';
import {renderToString} from 'react-dom/server';
import App from './views/server/components/App.jsx';
    
    

2.由于用了import等ES6语法,所以使用了babel-register:

require('babel-polyfill');
require('source-map-support').install();
require('babel-register')({
    presets: ['es2015', 'react', 'stage-0'],
    plugins: ['add-module-exports']
});

require('./server.js');

3.问题在于我的App.jsx中,使用了App.less,并且less中@import了一个通用的Less:

import './App.less';//App,jsx中使用了App.less

@import './common.less//App.less中引入

4.就报错了:

clipboard.png

阅读 3.4k
1 个回答

原因是babel把@规则当成ES7 Decorators去解析了。
不过对于这个问题如何解决,没什么好的想法,我和lz用的技术栈差别略大。。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题