在同构 React 组件中导入 CSS 文件

我有一个 React 应用程序，其中包含用 ES6 编写的组件 - 通过 Babel 和 Webpack 进行编译。

在某些地方，我想包含具有特定组件的特定 CSS 文件，如中所建议的React webpack 食谱 https://christianalfoni.github.io/react-webpack-cookbook/Loading-CSS.html

但是，如果在任何组件文件中我需要静态 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 加载器会将其解释为另一个源，并尝试将 CSS 转换为 Javascript。

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

我为 .js/jsx 和 CSS 资源指定了加载器，如下所示：

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

查看完整的 webpack 配置文件 http://pastebin.com/UmhmB05S

完整详情如下：

webpack.common.js http://pastebin.com/UmhmB05S- 我使用的基本 webpack 配置，因此我可以在开发和生产之间共享属性。

Gruntfile.js http://pastebin.com/nZqtxaj6- 用于开发的 Gruntfile。正如您所看到的，它需要上面的 webpack 配置并为其添加一些开发属性。这可能是导致问题的原因吗？

Html.jsx http://pastebin.com/Qem1muUr- 我的 HTML jsx 组件尝试导入/需要 CSS。这是一个同构应用程序（使用Fluxbile http://fluxible.io/），因此需要将实际的 HTML 作为渲染组件。在我的应用程序的任何部分使用此文件中看到的 require 语句都会给出所描述的错误。

好像和grunt有关系。如果我只是编译webpack --config webpack.common.js然后我就没有错误了。

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

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

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

为了使其成为可能，您应该设置process.env.BROWSER to false（或删除）在服务器上服务器.js

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

并将其设置为true对于浏览器。您可以在配置中使用 webpack 的 DefinePlugin 来完成此操作 -webpack.config.js

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

你可以在 gpbl 中看到这个操作同构500 https://github.com/gpbl/isomorphic500/ app.