相关疑难解决方法(0)

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

在某些地方,我想包含特定组件的特定CSS文件,如反应webpack cookbook中所建议的那样

但是,如果在任何组件文件中我需要静态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加载器会将其解释为另一个源并尝试将CS​​S转换为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 - …