So verwenden CSS Reagieren Modul in Meteor 1.3 beta

Question

EDIT: Meteor 1.3 Release ist und ein npm package ist etwa freigegeben werden, um eine direkte Verwendung von CSS-Modulen ermöglicht, ohne Webpack

---

Ich möchte Verwenden Sie https://github.com/gajus/react-css-modules in Meteor 1.3 über NPM. Aber die Readme sagt Webpack zu verwenden. Ich habe Webpack nie benutzt, da es mir scheint, den gleichen Build Job wie Meteor zu machen.

Kennen Sie in diesem speziellen Fall einen Weg, React Module CSS in Meteor 1.3 beta zu verwenden?

Answer 1

Es gibt eigentlich Paket dafür. MDG erwägt auch, Webpacks irgendwann auf den Meteorkern zu bringen. Und ja, es ist Build-Tool. Einfacher modular und schneller als der aktuelle. Es ist auch ziemlich komplex, wie Build-Tools gehen, zumindest meiner Meinung nach.

Um webpacks in Meteor haben nur>

meteor add webpack:webpack 
meteor remove ecmascript 

Sie müssen ecmascripts entfernen, da sie von webpack, wie gut und mit 2 installiert bekommen kann Fehler verursachen.

Für eine ausführlichere Antwort lesen Sie Sam Corcos Blogpost und auch Ben Strahans Kommentar für Meteor 1.3 Beta. Ich habe es als Tutorial benutzt, um ein anderes Webpack-Paket zu bekommen.

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

Für Paket erwähnt man denke ich webpack.packages.json so etwas wie dieses

{ 
    "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" 
    } 

aussehen sollte und webpack.config.js Sie direkt von

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

Answer 2

Sie können kopieren könnten fange so von vorne an.

Anfang von Grund auf neu

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 

Eintrag Dateien

Ihre Eingabe-Dateien werden in Ihrem package.json definiert. Der Haupteintrag ist Ihr Servereintrag und der Browser ist Ihr Client-Eintrag.

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

Für weitere Informationen klicken Sie bitte auf diesen link

Answer 3

Meteor v1.3.2 eingeführt Einbau-Importfunktion für .css Dateien (wie auch andere CSS-Präprozessor-Dateien, wie less und sass) aus .js und .jsx.

beispielsweise angesichts der folgende (vereinfachte) Ordnerstruktur,

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

wo some-module eine NPM-Modul wird unter Verwendung installiert:

$ meteor npm install --save some-module 

einführende lokale und Modul Sheets in 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';