在Isomorphic React组件中导入CSS文件 [英] Importing CSS files in Isomorphic React Components

问题描述

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

I have a React application with Components written in ES6 - transpiled via Babel and Webpack.

在某些地方我想要包含特定组件的特定CSS文件，正如反应webpack食谱中所建议的那样

In some places I would like to include specific CSS files with specific Components, as suggested in react webpack cookbook

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

However, if in any Component file I require a static CSS asset, eg:

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

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

Then the compilation fails with an error:

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。

It seems that if I try and require a CSS file in a Component file, then the Babel loader will interpret that as another source and try to transpile the CSS into Javascript.

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

Is this expected? Is there a way to achieve this - allowing transpiled files to explicitly reference static assets that are not to be transpiled?

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

I have specified loaders for both .js/jsx and CSS assets as follows:

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

查看完整的webpack配置文件

以下详细信息：

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

webpack.common.js - A base webpack config I use, so I can share properties between dev and production.

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

Gruntfile.js - Gruntfile used for development. As you can see it requires the webpack config above and adds some development properties to it. Could this be causing the problem?

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

Html.jsx - My HTML jsx component that tries to import/require the CSS. This is an isomorphic app (using Fluxbile), hence needing to have the actual HTML as a rendered component. Using the require statement seen in this file, in any part of my application, gives the error described.

这似乎与grunt 有关。如果我只是用 webpack --config webpack.common.js 编译，那么我没有错误。

It seems to be something to do with grunt. If I just compile with webpack --config webpack.common.js then I get no errors.

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

Short answer: It's a node runtime error. Trying to load CSS on the server in isomorphic apps is not a good idea.

推荐答案

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

You can't require css in the component that you are rendering on the server. One way to deal with it is to check if it's a browser before requiring css.

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

为了实现这一目标，你应该设置流程.env.BROWSER 到服务器
server.js

In order to make it possible you should set process.env.BROWSER to false (or delete it) on the server server.js

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

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

and set it to true for the browser. You do it with webpack's DefinePlugin in the config - webpack.config.js

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

你可以在gpbl的Isomorphic500 app。

You can see this in action in gpbl's Isomorphic500 app.

这篇关于在Isomorphic React组件中导入CSS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！