從meteor 1.4中的node_modules導入css with react

Question

我想使用一個npm包，即使用React在我的Meteor 1.4項目中使用react-date-picker 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存儲庫 （commit 902c92c）上找到。 該應用程序稱為“reactDataGrid”，它是存儲庫的子文件夾，您只需在該文件夾中運行“meteor”。

我的關鍵步驟是：

• npm install webpack --save-dev為項目安裝web pack
• 使用此處描述的內容創建.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限制在我的帖子中的兩個鏈接，所以我不能在這里鏈接它）

我不能保證這是這樣做的首選方法，但我可以說它對我有用。 我希望它有所幫助。

最好，凱文