2016-10-03 4 views
3

Reactを使用してMeteor 1.4プロジェクトでnpmパッケージ、つまりreact-date-pickerを使用したいとします。 react-date-pickerパッケージには、正しく表示するために含める必要があるCSSが付属しています。私は流星に​​をロードして、それをそのcssの残りの部分に含めるように指示する必要がありますが、これを行う方法は失われています。その他は、あなたは、単にこのmeteor 1.4のnode_modulesからのcssを反応でインポート

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

よう.jsxのコンポーネント内から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. 

のでリアクトで流星を使用してnode_modulesからCSSをインポートするための好ましい方法は何であるとして解析?

答えて

1

あなたが言うように、それはJSとして解析されているようです。しかし、このようにCSSをインポートすることは正解で、通常はうまくいくので、何か変わっているはずです...だから、野生の推測を試してみましょう。index.cssからのようなファイルに名前を変更してみてください。 「索引」の名前がJSの解釈を引き起こしている可能性があります。

+0

いや、それはまだかかわらず、CSSの名前の、文句を言います。私は、 'react-datetime'パッケージに切り替えました。その' css 'ファイルは 'react-datetimeです。同じエラーが発生します。 –

0

私はこの問題で数日間頑張っています(私はnode.js/Meteor/React/JavaScriptの世界には初めてです)。私は

node_modulesにCSSファイルをインポートする/反応し、データグリッド/ index.cssを必要と理解することが容易に確認する必要があり、小さなアプリケーションに適用される私の作業溶液(;私はハードコーディングされたデータを使用してデータグリッドを表示します)は私のGitHub repository(コミット902c92c)にあります。アプリケーションは "reactDataGrid"と呼ばれ、リポジトリのサブフォルダです。そのフォルダ内で "meteor"を実行するだけです。私の場合は

重要なステップは以下の通りであった。

  • npm install webpack --save-devコンテンツと.babelrcファイルを作成するために、プロジェクト
  • のためのウェブパックをインストールするhereを説明した(以下コピー)。これは、WebpackがJSXの構文を解析するのに役立つと思います。

{ 
    "presets": [ 
    [ 
     "es2015", 
     { 
     "modules": false 
     } 
    ], 
    "react" 
    ] 
} 
  • .babelrc私のアプリの依存関係ツリーでそのCSSファイルを含めるようにWebPACKのを告げる私のクライアント/ main.jsxファイル、内部のrequire('react-datagrid/index.css')ステートメントを追加します。これは実際にzippyui/react-datagrid GitHubリポジトリのREADMEに記述されている命令です。私は、これはがそれを行うための方法を好んであることを保証することはできませんが、私はそれが私の作品と言うことができ

(残念ながら私のポストに2つのリンクには限界がStackOverflowのので、私はもうここでそれをリンクすることはできません)。私はそれが助けて欲しいベスト

、 ケビン

関連する問題