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

Question

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

在某些地方，我想包含特定CSS文件和特定组件，如react
webpack手册中
所建议

但是，如果在任何组件文件中，我都需要静态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)

看来，如果我尝试在Component文件中要求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语句，都会给出所描述的错误。

这似乎与咕unt有关 。如果我只是编译，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为浏览器。您可以在配置中使用webpack的DefinePlugin- webpack.config.js

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

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