IMPORTANT This tool is for educational purposes only
With npx
# npx create-atomic-resources <destination dir>
npx create-atomic-resources ./src
Manually
Clone repo with degit
degit https://github.com/ReneKrewinkel/create-atomic-resources.git <destination dir>
Setup
- Add to
.storybook/preview.js
:
import "../<destination dir>/resources/styles/main.css"
- Install json-to-scss:
npm i json-to-scss
- add a script to
package.json
:
{
"scripts": {
"token": "json-to-scss <destination dir>/resources/design/tokens.json <destination dir>/resources/styles/tokens/_tokens.scss"
}
}
- Uncomment when using atomic-bomb
<destination dir>/resources/styles/main.scss
:
/* Uncomment when using atomic-bomb */
// @import '../../components/atoms';
// @import '../../components/molecules';
// @import '../../components/organisms';
// @import '../../components/templates';
// @import '../../components/pages';