メテオでモジュールのCSSを反応させるの1.3ベータ

Question

を使用する方法EDIT：流星1.3のリリースが出ているとnpm packageはWebPACKのなしでCSSモジュールを直接使用することができ

---

を解放されようとしている私がしたいですMeteor 1.3でNPM経由でhttps://github.com/gajus/react-css-modulesを使用してください。しかし、readmeにはWebpackを使用するように言われています。私はMeteorと同じビルド・ジョブをするように見えるので、Webpackを使ったことはありません。

この特定のケースでは、Meteor 1.3ベータ版でリアクションモジュールCSSを使用する方法を知っていますか？

Answer 1

実際にはこのためのパッケージがあります。 MDGは、ある段階で流星核にウェブパックを持ち込むことも検討している。そして、それはビルドツールです。現在のモジュールよりもモジュール化され、高速です。ビルドツールとしてもかなり複雑ですが、少なくとも私の意見では。流星でwebpacksあなたは、同様のWebPACKからそれらを取得し、2つのインストールを持つことは、エラーが発生する可能性がありますようecmascriptsを削除する必要があるだけ>

meteor add webpack:webpack 
meteor remove ecmascript 

を持っている

。

もっと詳しくは、Sam Corcosのブログ記事とMeteor 1.3 BetaのBen Strahanのコメントを確認してください。私は別のwebpackパッケージを取得するチュートリアルとしてそれを使用しました。パッケージの場合

https://medium.com/@SamCorcos/meteor-webpack-from-the-ground-up-f123288c7b75#.phcq5lvm8

私はwebpack.packages.jsonこの

{ 
    "private": true, 
    "scripts": { 
    "start": "webpack-dev-server" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.4.5", 
    "babel-loader": "^6.2.1", 
    "babel-preset-es2015": "^6.3.13", 
    "babel-preset-react": "^6.3.13", 
    "babel-preset-stage-0": "^6.3.13", 
    "css-loader": "^0.23.1", 
    "extract-text-webpack-plugin": "^1.0.1", 
    "style-loader": "^0.13.0", 
    "webpack": "^2.0.6-beta", 
    "webpack-dev-server": "^2.0.0-beta" 
    }, 
    "dependencies": { 
    "react": "^0.15.0-alpha.1", 
    "react-css-modules": "^3.7.4", 
    "react-dom": "^0.15.0-alpha.1" 
    } 

ようになるはずだと思う言及し、あなたがすることができ

https://github.com/gajus/react-css-modules-examples/blob/master/webpack.config.js

Answer 2

から直接コピーすることができwebpack.config.jsこのように最初から始めてください。最初から

スタート

meteor create test-project 
cd test-project 
npm init 
meteor remove ecmascript 
meteor add webpack:webpack 
meteor add webpack:react 
meteor add webpack:less 
meteor add react-runtime # Skip this step if you want to use the NPM version 
meteor add react-meteor-data 
meteor 
npm install 
meteor 

あなたのエントリファイルは、あなたのpackage.json内で定義されているエントリファイル。メインはサーバーのエントリで、ブラウザはクライアントのエントリです。詳細情報については

{ 
    "name": "test-project", 
    "private": true, 
    "main": "server/entry.js", 
    "browser": "client/entry.js" 
} 

.js内から（lessとsassとしてだけでなく、他のCSSプリプロセッサフ​​ァイル、など）このlink

Answer 3

流星ビルトイン.cssたファイルのインポート機能導入v1.3.2デベロッパーを確認してくださいと.jsx。下記（簡体字）のフォルダ構造所与例えば

、some-moduleがNPMモジュールを使用してインストールされ

 
. 
├── client 
│   └── main.js 
├── imports 
│   └── client 
│    ├── main.css 
│    └── main.jsx 
├── node_modules 
│   └── some-module 
│    └── dist 
│     └── css 
│      └── main.css 
├── package.json 
└── server 
    └── main.js 

：ローカルおよびモジュールスタイルシートをインポート

$ meteor npm install --save some-module 

imports/client/main.jsxで：

// importing a style file from a node module 
import 'some-module/dist/css/main.css'; 

// importing a style from a local file 
import './main.css';