webpack - 从 node_modules 导入 css 文件

Question

我们有一个私有的 npm 存储库，其中有一个 css 文件作为 lib 文件夹的一部分。

当尝试使用该 css 文件时

require('<module_name>/lib/abc.css')

并使用 webpack 加载它，我得到以下错误：

语法错误：意外的令牌 {

任何帮助，如何导入此类文件

score 0 · Accepted Answer

我也被这个问题困扰了好几天（我是 node.js/Meteor/React/JavaScript 世界的新手）。我找到了使用 webpackJS 的解决方案。

我的GitHub 存储库（提交 902c92c）上提供了我的工作解决方案（应用于应该使其易于理解的小型应用程序；我只显示使用硬编码数据的数据网格）。该应用程序称为“reactDataGrid”，它是存储库的子文件夹，您只需要在该文件夹中运行“meteor”。

在我的案例中，两个关键步骤是：

使用此处描述的内容（并在下面复制）创建一个.babelrc文件。我相信这有助于 webpack 解析 react 的 JSX 语法。我觉得这也可能是您的问题的关键，因为它被报告为.SyntaxError

.babelrc

{
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],
    "react"
  ]
}

我的main.jsx文件中的require('react-datagrid/index.css')语句，它告诉 webpack 将该 CSS 文件包含在我的应用程序的依赖树中。这实际上是 zippyui/react-datagrid GitHub 存储库的 README 中描述的指令。（不幸的是，stackoverflow 限制了我帖子中的两个链接，所以我不能再在这里链接了）

我不能保证这是首选的方法，但我可以说它对我有用。我希望它有所帮助。

最好的，凯文

1 回答 1