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

56 浏览
0 Comments

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

我有一个使用ES6编写的React应用程序，通过Babel和Webpack进行转译。

在某些地方，我想要在特定组件中包含特定的CSS文件，就像在react webpack cookbook中建议的那样。

然而，如果在任何组件文件中引入一个静态的CSS资源，例如：

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

那么编译就会失败，出现错误：

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

详细信息如下：

webpack.common.js - 我使用的基本webpack配置文件，可以在开发和生产之间共享属性。

Gruntfile.js - 用于开发的Gruntfile。如您所见，它要求上面的webpack配置，并添加了一些开发属性。这可能是问题的原因吗？

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

似乎与grunt有关。如果我只使用webpack --config webpack.common.js进行编译，就不会出现错误。

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

0