导入同构反应组件中的CSS文件
我有一个反应应用程序与组件编写的ES6 -转通过巴贝尔和Webpack。
在某些地方，我希望按照反应webpack食谱中的建议，包括具有特定组件的特定CSS文件。
但是，如果在任何组件文件中，我需要一个静态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)如果我试图在组件文件中要求一个CSS文件，那么Babel加载程序就会将它解释为另一个源，并尝试将CSS转换到Javascript中。
这是意料之中吗？是否有一种方法来实现这一目标--允许被转移的文件显式引用不可转移的静态资产？
我已经为. as /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组件，它试图导入/需要CSS。这是一个同构的应用程序(使用氟胆)，因此需要将实际的HTML作为呈现的组件。在我的应用程序的任何部分中，使用该文件中的require语句都会给出所描述的错误。
，这似乎与咕哝的有关。如果我只是使用webpack --config webpack.common.js编译，那么我就没有错误。
简短回答：这是一个节点运行时错误。在同构的应用程序中尝试在服务器上加载CSS并不是一个好主意。
Stack Overflow用户
发布于 2016-05-10 12:09:40
当我想做服务器端渲染时，我也遇到了同样的问题。
所以我写了一个后置插件，postcss-散列-类名。
您不需要直接使用css。
您需要css类名js文件。
因为您所需要的只是js文件，所以您可以像往常一样进行服务器端呈现。
此外，这个插件还使用您的类名和文件路径生成唯一的散列来解决css范围问题。
你可以试试！
https://stackoverflow.com/questions/30347722
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号