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.
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 email@example.com
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
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
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.
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.
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