Custom React Themes Using Clarion
React is a fantastically flexible framework that focuses on rendering complex views. This flexibility can make documentation a little difficult, so for this example I will be using the create-react-app command line scaffolding tool.
Starting Your Project
Before you get started, make sure Clarion and create-react-app are installed:
npm install -g clarion create-react-app
After the install is finished, create your new project:
Note: You must use all lower-case letters in your new project name.
Update Your Project for SASS
The following is a summary from the create-react-app documentation:
Install the SASS Compiler
npm install --save node-sass-chokidar npm-run-all
Update the Project Commands
package.json file, replace the
scripts commands with the following commands:
"build-css": "node-sass-chokidar src/ -o src/", "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive", "start-js": "react-scripts start", "start": "npm-run-all -p watch-css start-js", "build": "npm run build-css && react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject"
Adding Clarion to the project can be done in 4 easy steps:
1. Create a Folder For Your Styles
src directory create a new folder called
Note: By default Clarion will look for the Clarion CSS Architecture in folders called
2. Navigate to Your New Directory
Using your command line or terminal, navigate to your new
3. Add Clarion
In order to avoid overriding any of the files provided by the You can add the Clarion architecture by using the
-O option. This will only install the Clarion Style Architecture.
clarion new -O
4. Add the Styles to index.js
src folder open the
index.js file and replace
import './index.css'; with
This will include the styles in the build process.
You should be able to use the Clarion CLI as you normally would. No additional configuration is necessary.