Question

我想在使用React的Meteor 1.4项目中使用npm包，即react-date-picker。 react-date-picker包附带了一些必须包含的css才能正确呈现。我需要告诉meteor加载node_modules/react-date-picker/index.css并将其包含在其余的css中，但我对如何执行此操作感到茫然。其他人建议您只需从.jsx组件中导入css，就像这样

import 'react-date-picker/index.css'

但这样做导致崩溃的服务器在css的第一行窒息（因为它似乎被解析为标准的javascript文件）

(function (exports, require, module, __filename, __dirname) { .react-date-field {
                                                              ^
) SyntaxError: Unexpected token .
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Module.Mp.load (/Users/gsferrer/.meteor/packages/babel-compiler/.6.9.1.7f3rvr++os+web.browser+web.cordova/npm/node_modules/reify/node/runtime.js:16:23)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at npmRequire (/Users/gsferrer/Projects/xxx/.meteor/local/build/programs/server/npm-require.js:129:10)
    at Module.Mp.useNode (packages/modules-runtime/modules-runtime.js:69:1)
=> Exited with code: 1
=> Your application is crashing. Waiting for file change.

那么使用Meteor和React从node_modules导入css的首选方法是什么？

Answer 1

正如你所说，它似乎被解析为JS。但是，以这种方式导入CSS是正确的并且通常有效，因此必定会有一些奇怪的事情......所以我会尝试一个疯狂的猜测：尝试将文件从index.css重命名为其他内容，例如react-date-picker.css。可能是“索引”名称触发了JS解释。

Answer 2

我在这个问题上也被困了几天（我是node.js / Meteor / React / JavaScript世界的新手）。我需要在 node_modules / react-datagrid / index.css中导入一个CSS文件

我的工作解决方案（应用于一个易于理解的小应用程序;我只使用硬编码数据显示数据网格）可在我的GitHub repository（提交902c92c）上获得。该应用程序被称为＆＃34; reactDataGrid＆＃34;，它是存储库的子文件夹，您只需要运行＆＃34; meteor＆＃34;在那个文件夹中。

我的案例中的关键步骤是：

npm install webpack --save-dev安装项目的网络包
使用描述here的内容创建 .babelrc 文件（并在下面复制）。我相信这有助于webpack解析反应的JSX语法。

<强> .babelrc

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

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

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

最佳，凯文

从meteor 1.4中的node_modules导入css with react

2 个答案: