如何使用作出反應模塊CSS流星1.3測試版

Question

編輯：流星1.3版本出來和npm package即將發佈允許直接使用的CSS模塊，而不的WebPack

---

我想通過NPM在流星1.3中使用https://github.com/gajus/react-css-modules。但自述說使用Webpack。我從來沒有使用Webpack，因爲在我看來，它和Meteor做同樣的構建工作。

那麼你知道一個方法，在這個特定的情況下，在Meteor 1.3測試版中使用React Module CSS嗎？

Answer 1

實際上有這個包。千年發展目標也在考慮在某個階段爲流星核心帶來webpack。是的，它是構建工具。只是比現在更模塊化和更快。至少在我看來，它的構建工具非常複雜。

要有webpacks流星只是>

meteor add webpack:webpack 
meteor remove ecmascript 

你需要爲你的WebPack以及讓他們和具有2個安裝可能會導致錯誤刪除ecmascripts。

要得到更完整的答案，請查看Sam Corcos博客文章，以及Ben Strahan對Meteor 1.3 Beta的評論。我用它作爲教程來獲得不同的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" 
    } 

而且webpack.config.js你可以直接從

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

Answer 2

您可以複製像這樣從頭開始。

從頭開始

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內檢查推出內置了.css文件導入功能此link

Answer 3

流星V1.3.2（以及其他CSS預處理程序文件，如less和sass）和.jsx。

例如，給定以下的（簡化的）文件夾結構，

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

其中some-module是使用安裝了NPM模塊：

$ 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';