在Isomorphic React组件中导入CSS文件

Question

我有一个使用ES6编写的组件的React应用程序 - 通过Babel和Webpack进行编译.

在某些地方,我想包含特定组件的特定CSS文件,如反应webpack cookbook中所建议的那样

但是,如果在任何组件文件中我需要静态CSS资产,例如:

import '../assets/css/style.css';

然后编译失败并出现错误:

SyntaxError: <PROJECT>/assets/css/style.css: Unexpected character '#' (3:0)
    at Parser.pp.raise (<PROJECT>\node_modules\babel-core\lib\acorn\src\location.js:73:13)
    at Parser.pp.getTokenFromCode (<PROJECT>\node_modules\babel-core\lib\acorn\src\tokenize.js:423:8)
    at Parser.pp.readToken (<PROJECT>\node_modules\babel-core\lib\acorn\src\tokenize.js:106:15)
    at Parser.<anonymous> (<PROJECT>\node_modules\babel-core\node_modules\acorn-jsx\inject.js:650:22)
    at Parser.readToken (<PROJECT>\node_modules\babel-core\lib\acorn\plugins\flow.js:694:22)
    at Parser.pp.nextToken (<PROJECT>\node_modules\babel-core\lib\acorn\src\tokenize.js:98:71)
    at Object.parse (<PROJECT>\node_modules\babel-core\lib\acorn\src\index.js:105:5)
    at exports.default (<PROJECT>\node_modules\babel-core\lib\babel\helpers\parse.js:47:19)
    at File.parse (<PROJECT>\node_modules\babel-core\lib\babel\transformation\file\index.js:529:46)
    at File.addCode (<PROJECT>\node_modules\babel-core\lib\babel\transformation\file\index.js:611:24)

似乎如果我尝试在组件文件中需要一个CSS文件,那么Babel加载器会将其解释为另一个源并尝试将CS​​S转换为Javascript.

这是预期的吗？有没有办法实现这一点 - 允许转换文件显式引用不被转换的静态资产？

我已经为.js/jsx和CSS资产指定了加载器,如下所示:

  module: {
    loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader" },
      { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel'}
    ]
  }

查看完整的webpack配置文件

详细信息如下:

webpack.common.js - 我使用的基本webpack配置,因此我可以在开发和生产之间共享属性.

Gruntfile.js - 用于开发的Gruntfile.正如您所看到的,它需要上面的webpack配置并为其添加一些开发属性.这会导致问题吗？

Html.jsx - 我的HTML jsx组件试图导入/需要CSS.这是一个同构应用程序(使用Fluxbile),因此需要将实际的HTML作为渲染组件.使用此文件中的require语句,在我的应用程序的任何部分中,都会给出所描述的错误.

这似乎与咕噜声有关.如果我只是编译webpack --config webpack.common.js然后我没有错误.

简短回答:这是一个节点运行时错误.尝试在同构应用程序中加载服务器上的CSS并不是一个好主意.

Answer 1

您不能要求在服务器上呈现的组件中使用css.处理它的一种方法是在要求css之前检查它是否是浏览器.

if (process.env.BROWSER) {
  require("./style.css");
}

为了使人们有可能,你应该设置process.env.BROWSER到false(或删除)在服务器 server.js

delete process.env.BROWSER;
...
// other server stuff

并将其设置true为浏览器.你可以在config - webpack.config.js中使用webpack的DefinePlugin来 实现

plugins: [
    ...
    new webpack.DefinePlugin({
        "process.env": {
            BROWSER: JSON.stringify(true)
        }
    })
]

您可以在行动gpbl我们看看这个Isomorphic500应用.

Answer 2

如果您正在使用ES6构建同构应用程序并希望在服务器上呈现时包含CSS(重要的是可以在第一个HTTP响应中将基本样式发送到客户端),请查看@withStylesReact Starter Kit中使用的ES7装饰器.

这个小小的美丽有助于确保用户在首次呈现页面时使用样式查看您的内容.这是一个示例同构应用程序我正在构建利用这种技术.只需搜索代码库@withStyles以查看它是如何使用的.它有点像这样:

import React, { Component, PropTypes } from 'react';
import styles from './ScheduleList.css';
import withStyles from '../../decorators/withStyles';

@withStyles(styles)
class ScheduleList extends Component {

Answer 3

你也可以尝试这个 https://github.com/halt-hammerzeit/webpack-isomorphic-tools

或者这个 https://github.com/halt-hammerzeit/webpack-react-redux-isomorphic-render-example

Answer 4

我们的同构应用程序遇到了类似的问题(还有很多其他问题,你可以在这里找到详细信息).至于CSS导入的问题,起初我们使用的是process.env.BROWSER.后来我们改用了babel-plugin-transform-require-ignore.它与babel6完美配合.

您只需要在.babelrc中包含以下部分

"env": {
   "node": {
     "plugins": [
       [
         "babel-plugin-transform-require-ignore", { "extensions": [".less", ".css"] }
       ]
     ]
   }
}

之后用BABEL_ENV ='node'运行你的应用程序.像那样:

BABEL_ENV='node' node app.js.

以下是生产配置的外观示例.