Using react-toolbox with react-boilerplate

UPDATE (13–01–2017): You can use react-toolbox without post-css now, so it’s really easy to use it in boilerplates like react-boilerplate or create-react-app. Check out https://github.com/react-toolbox/react-toolbox-themr.

___________________________________________________________________

This is a small tutorial for integrating react-toolbox with react-boilerplate.

First of all, English is not my native language and I’m kind of new to the react world, so any feedback about what I’m about to write is welcome :)

Let’s start cloning the react-boilerplate project

git clone — depth=1 https://github.com/mxstbr/react-boilerplate.git

and running the setup

npm run setup

now let’s install some dependencies needed by react-toolbox

npm install -D postcss-each postcss-mixins

we also need to install postcss-import, but since they have a bug in the 8.1.2 version we have to use the 8.1.0

npm install -D -E postcss-import@8.1.0

since is the future of the project, let’s use the `css-next` branch of react-toolbox.

npm install -S immutability-helper normalize.css https://github.com/react-toolbox/react-toolbox#css-next

Now we have to edit internals/webpack/webpack.base.babel.js and add the postcss chain used in react-toolbox

After the line const postcssReporter = require(‘postcss-reporter’); we add the following:

const postcssImport = require('postcss-import');
const postcssMixins = require('postcss-mixins');
const postcssEach = require('postcss-each');

and then, in the postcss function (line 68) we add this

postcssImport({
addDependencyTo: webpackInstance,
}),
postcssMixins(),
postcssEach(),

remember to add webpackInstance to the function arguments, it should look something like postcss: (webpackInstance) => [

Next step, in the same file we’re going to remove exclude: /node_modules/ from

{
// Transform our own .css files with PostCSS and CSS-modules
test: /\.css$/,
exclude: /node_modules/,
loader: options.cssLoaders,
}

and also remove the next block

{
// Do not transform vendor’s CSS with CSS-modules
// The point is that they remain in global scope.
// Since we require these CSS files in our JS or CSS files,
// they will be a part of our compilation either way.
// So, no need for ExtractTextPlugin here.
test: /\.css$/,
include: /node_modules/,
loaders: ['style-loader', 'css-loader'],
}

And we are good to go, you should be able to use react-toolbox in your project.

Remember you have to import the commons.css file so the components don’t look weird.

import 'react-toolbox/lib/commons.css';

Here is the repo with the changes I did in this tutorial if you want to see the diff.

That’s all, thank you for reading and happy coding! :D