在Gulp中使用babelify，将css结果导入意外标记；{quot；

我正在我的jsx中导入css，并将gulp与browserify和babelify一起使用。不知怎的，我遇到了以下错误：

我有以下导入css的jsx：

import '../../css/app.css';

function Square(props) {
    return (
        <button className="squares" onClick={props.onClick}>
          {props.value}
        </button>
        );
} ...

在我的package.json文件中，我有browserify的配置：

  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015",
            "env",
            "react"
          ]
        }
      ]
    ]
  },

我有以下依赖项：

  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-env": "^1.5.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babelify": "^7.3.0",
    "browserify": "^14.4.0",
    "glob": "^7.1.2",
    "gulp": "^3.9.1",
    "gulp-cli": "^1.3.0",
    "gulp-exit": "0.0.2",
    "gulp-sourcemaps": "^2.6.0",
    "gulp-uglify": "^3.0.0",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.9.0"
  }

---

正如你所看到的，我可能已经添加了我需要的更多预设，我对这一点非常陌生，我想也许巴贝尔不知道它正在查看css文件并将其视为jsx。

我发现了我缺少的内容，“浏览css”

我将gulpfile更改为：

var bundler = watchify(browserify(files[i], {
    debug : true
}).transform(babelify.configure({
    presets : [ 'es2015', 'react', 'env' ]
})).transform(browserifyCss), {
    poll : true
});

---

我发现我遗漏了什么，“浏览css”

我将gulpfile更改为：

var bundler = watchify(browserify(files[i], {
    debug : true
}).transform(babelify.configure({
    presets : [ 'es2015', 'react', 'env' ]
})).transform(browserifyCss), {
    poll : true
});

---

像这样直接导入CSS我会很小心。这实际上是一个特定于网页包的功能，而不是ES6规范中任意导入静态资产的一部分。你现在编写的源代码直接依赖于浏览CSS或网页包，如果你以后决定切换出构建系统，这将是一个麻烦o重构您的代码，以正确的方式执行（只需像平常一样在html文件的链接元素中包含css）

像这样直接导入CSS我会很小心。这实际上是一个特定于Web包的功能，而不是ES6规范中任意导入静态资产的一部分。您现在编写的源代码直接取决于是否浏览CSS或Web包，如果您以后决定切换生成系统，这将是一个很好的选择sle需要重构您的代码，以正确的方式执行（只需像平常一样在html文件中的链接元素中包含css）

您提出了什么样的替代方案？您提出了什么样的替代方案？