-
Crear un proyecto desde create-react-app.
$ create-react-app <nombre_del_proyecto>
-
Agregar foundation-sites como dependencia del proyecto.
$ npm install foundation-site --save
-
Incluir los estilos de foundation dentro del archivo CSS principal index.css.
@import "../node_modules/foundation-sites/scss/foundation";
@include foundation-everything;
-
Debido a que foundation está estructurado con Sass es necesario incluir un
preprocesador de estilos dentro del proyecto y así compatibilizarlos, para esto nos ayudamos con la documentación que ya trae el kit de react e instalamos node-sass-chokidar$ npm install node-sass-chokidar --save-dev
-
Luego incluimos en package.json los scripts correspondientes para generar CSS desde SASS.
"scrips": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
...
}
- Renombramos los archivos de estilo que queremos procesar, en este caso index.css a index.scss y ejecutamos npm run build-css para testear que funciona correctamente.
Ya podemos ejecutar nuevamente npm start
y notar que ya no arroja error con
SASS.
-
Es posible automatizar la generación de los archivos CSS desde SASS al ejecutar
npm start
incluyendo la siguiente dependencia.$ npm install npm-run-all --save-dev
-
Luego es necesario modificar los scripts contenidos en package.json
"scripts": {
...
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
...
}
-
Ahora es posible agregar la dependencia de Foundation para react.
$ npm install react-foundation --save
-
Como ejemplo es posible agregar un botón al estilo Foundation y revisar que este se vea correctamente, eso lo realizamos en App.js.
<Button color={Colors.SUCCESS}>Testing Foundation</Button>
- Para que este ejemplo funcione, es necesario importar al mismo archivo los componentes de Foundation al botón insertado.
import { Button, Colors } from 'react-foundation';