How to use React Module CSS in Meteor 1.3 beta

Question

EDIT: Meteor 1.3 release is out and a npm package is about to be released allowing a direct use of CSS modules without Webpack

---

I would like to use https://github.com/gajus/react-css-modules in Meteor 1.3 via NPM. But the readme says to use Webpack. I never used Webpack as it seems to me to do the same build job as Meteor.

So do you know a way, in this specific case, for using React Module CSS in Meteor 1.3 beta?

Answer 1

Meteor v1.3.2 introduced built-in import functionality for .css files (as well as other CSS preprocessor files, such as less and sass) from within .js and .jsx.

For example, given the following (simplified) folder structure,

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

where some-module is an npm module installed using:

$ meteor npm install --save some-module

importing local and module stylesheets 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';

Answer 2

There is actually package for this. MDG is also considering bring webpacks on meteor core at some stage. And yes it is build tool. Just more modular and faster than current one. Its also pretty complex as build tools go, at least in my opinion.

To have webpacks in meteor just >

meteor add webpack:webpack
meteor remove ecmascript

You need to remove ecmascripts as you get them from webpack as well and having 2 installs can cause errors.

For much more complete answer check Sam Corcos blog post and also Ben Strahan's comment for Meteor 1.3 Beta. I used it as tutorial to get different webpack package up.

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

For package you mentioned I think webpack.packages.json should look something like this

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

And webpack.config.js you could copy directly from

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

Answer 3

You can start from scratch like this.

Start from scratch

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

Entry files

Your entry files are defined within your package.json. The main is your server entry and the browser is your client entry.

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

For more info please check this link