在ReactJS ES6文件中導入CSS腳本時出現意外的令牌非法錯誤

Question

我正在使用php將數據發布到node.js來渲染reactjs組件服務器端。

調試控制台顯示，當變量component返回undefined時，將發生錯誤Unexpected token ILLEGAL錯誤。

React = require('react'),
ReactDOM = require('react-dom/server'),
require('babel-core/register');
app.post('/something', function (req, res) {
    try {
        var view = './src/ItemPage';
        var component = require(view); <<<====== Error
        var props = req.body || null;
        res.status(200).send(
            ReactDOM.renderToString(
                React.createElement(component, props)
            )
        );
    } catch (err) {
        res.status(500).send(err.message);
    }
});

問題是由於從bundle.js UI庫導入css腳本，以便將css包括在bundle.js 。 如果刪除該樣式導入行，則腳本可以正常運行。 為什么以下類在節點中返回undefined？ 是否存在語法錯誤？ 它在webpack中編譯良好。

ItemPage類：

import React from 'react';
import Tabs from 'grommet/components/Tabs';
import Tab from 'grommet/components/Tab';
import 'grommet/grommet.min.css'; <<=== Error !!!!

export default class ItemPage extends React.Component {

    render(){ return <Tabs>
        <Tab title="First Title">
            <h3>First Tab</h3>
            <p>Contents of the first tab !</p>
        </Tab>
        <Tab title="Second Title">
            <h3>Second Tab</h3>
            <p>Contents of the second tab</p>
        </Tab>
        <Tab title="Third Title">
            <h3>Third Tab!</h3>
            <p>Contents of the third tab</p>
        </Tab>
      </Tabs>
    }
}


module.exports = ItemPage;

Answer 1

如果您希望能夠將樣式表與其他模塊模塊化，則應將css-laoder與webpack css-laoder使用。

安裝它：

npm install style-loader css-loader --save-dev

並配置它：

{
// ...
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
   }
}

這將可能需要CSS。

在此處和此處可以找到更多信息。