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

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 2

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