在同构React组件中导入CSS文件
我有一个使用ES6编写的组件的React应用程序 - 通过Babel和Webpack传输。
在一些地方，我想包含特定的CSS文件和特定的组件，如反应webpack食谱中所建议的
但是，如果在任何组件文件中需要静态CSS资源，例如：
import '../assets/css/style.css';
然后编译失败并出现错误：
SyntaxError: <PROJECT>/assets/css/style.css: Unexpected character '#' (3:0)
at Parser.pp.raise (<PROJECT>node_modulesbabel-corelibacornsrclocation.js:73:13)
at Parser.pp.getTokenFromCode (<PROJECT>node_modulesbabel-corelibacornsrctokenize.js:423:8)
at Parser.pp.readToken (<PROJECT>node_modulesbabel-corelibacornsrctokenize.js:106:15)
at Parser.<anonymous> (<PROJECT>node_modulesbabel-corenode_modulesacorn-jsxinject.js:650:22)
at Parser.readToken (<PROJECT>node_modulesbabel-corelibacornpluginsflow.js:694:22)
at Parser.pp.nextToken (<PROJECT>node_modulesbabel-corelibacornsrctokenize.js:98:71)
at Object.parse (<PROJECT>node_modulesbabel-corelibacornsrcindex.js:105:5)
at exports.default (<PROJECT>node_modulesbabel-corelibbabelhelpersparse.js:47:19)
at File.parse (<PROJECT>node_modulesbabel-corelibbabeltransformationfileindex.js:529:46)
at File.addCode (<PROJECT>node_modulesbabel-corelibbabeltransformationfileindex.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配置，因此我可以在dev和production之间共享属性。
Gruntfile.js - 用于开发的Gruntfile。 正如你可以看到它需要上面的webpack配置，并添加一些开发属性。 这是否会导致问题？
Html.jsx - 我试图导入/需要CSS的HTML jsx组件。 这是一个同构的应用程序（使用Fluxbile），因此需要将实际的HTML作为渲染组件。 在我的应用程序的任何部分使用此文件中看到的require语句给出了所描述的错误。
这似乎与咕噜声有关 。 如果我只是使用webpack --config webpack.common.js编译webpack --config webpack.common.js那么我不会出错。
简答 ：这是一个节点运行时错误。 尝试在同构应用程序中加载服务器上的CSS不是一个好主意。
您不能在您要在服务器上呈现的组件中需要css。 处理它的一种方法是在需要css之前检查它是否是浏览器。
if (process.env.BROWSER) {
require("./style.css");
}
为了使它成为可能，你应该在服务器server.js上将process.env.BROWSER设置为false （或删除它）
delete process.env.BROWSER;
...
// other server stuff
并为浏览器设置为true 。 你可以使用webpack的DefinePlugin在config - webpack.config.js中完成
plugins: [
...
new webpack.DefinePlugin({
"process.env": {
BROWSER: JSON.stringify(true)
}
})
]
你可以在gpbl的Isomorphic500应用程序中看到这一点。
如果您使用ES6构建同构应用程序，并希望在服务器上呈现时包含CSS（重要的是，基本样式可以在第一个HTTP响应中发送到客户端），请查看React Starter Kit中使用的@withStyles ES7修饰器。
这个小小的美景有助于确保用户在第一次呈现页面时可以看到带有样式的内容。 以下是我利用这种技术构建的同构应用程序示例。 只需在代码库中搜索@withStyles ，看看它是如何使用的。 它有点像这样：
import React, { Component, PropTypes } from 'react';
import styles from './ScheduleList.css';
import withStyles from '../../decorators/withStyles';
@withStyles(styles)
class ScheduleList extends Component {
你也可以试试这个https://github.com/halt-hammerzeit/webpack-isomorphic-tools
或者这个https://github.com/halt-hammerzeit/webpack-react-redux-isomorphic-render-example
链接地址: http://www.djcxy.com/p/52143.html