在同构 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 文件，如 react 中所建议的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';

然后编译失败并报错:

SyntaxError: <PROJECT>/assets/css/style.css: Unexpected character '#' (3:0)
    at Parser.pp.raise (<PROJECT>
ode_modulesabel-corelibacornsrclocation.js:73:13)
    at Parser.pp.getTokenFromCode (<PROJECT>
ode_modulesabel-corelibacornsrc	okenize.js:423:8)
    at Parser.pp.readToken (<PROJECT>
ode_modulesabel-corelibacornsrc	okenize.js:106:15)
    at Parser.<anonymous> (<PROJECT>
ode_modulesabel-core
ode_modulesacorn-jsxinject.js:650:22)
    at Parser.readToken (<PROJECT>
ode_modulesabel-corelibacornpluginsflow.js:694:22)
    at Parser.pp.nextToken (<PROJECT>
ode_modulesabel-corelibacornsrc	okenize.js:98:71)
    at Object.parse (<PROJECT>
ode_modulesabel-corelibacornsrcindex.js:105:5)
    at exports.default (<PROJECT>
ode_modulesabel-corelibabelhelpersparse.js:47:19)
    at File.parse (<PROJECT>
ode_modulesabel-corelibabel	ransformationfileindex.js:529:46)
    at File.addCode (<PROJECT>
ode_modulesabel-corelibabel	ransformationfileindex.js:611:24)

似乎如果我尝试在组件文件中需要一个 CSS 文件，那么 Babel 加载器会将其解释为另一个源并尝试将 CSS 转换为 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.

好像跟咕噜声有关.如果我只是用 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");
}

为了使它成为可能，您应该在服务器上将 process.env.BROWSER 设置为 false(或将其删除)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

并将其设置为 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 应用程序中看到这一点.

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

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