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.

create-react-app my-app

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

In the 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

Adding Clarion to the project can be done in 4 easy steps:

1. Create a Folder For Your Styles

Under the src directory create a new folder called sass.

Note: By default Clarion will look for the Clarion CSS Architecture in folders called sass, scss, or less.

2. Navigate to Your New Directory

Using your command line or terminal, navigate to your new sass folder:

cd src/sass

3. Add Clarion

In order to avoid overriding any of the files provided by the You can add the Clarion architecture by using the --only or -O option. This will only install the Clarion Style Architecture.

clarion new -O

4. Add the Styles to index.js

In the src folder open the index.js file and replace import './index.css'; with import './sass/styles.scss';. This will include the styles in the build process.

Conclusion

You should be able to use the Clarion CLI as you normally would. No additional configuration is necessary.