Clarion plays really well with Angular, especially if you are using Angular CLI. If you don't have it installed already, make sure you install it now.
Before you get started, make sure Clarion and the Angular CLI are installed:
npm install -g clarion @angular/cli
By default, new projects that are created using the Angular CLI use
.css as the style format. Fortunately, the Angular team has built in a way for you to also configure your project with
.less when you create a new project. To get started we will run the command to create a new project, but specify the style option:
ng new MyProject --style=scss
If you have an existing project that uses the default
.css format or would like to change from one format to another, you can do so by changing the Angular CLI configuration. If you already have an existing
.angular-cli.json configuration file located at the root of your project, you can manually change the
styleExt property of your choice. If you would like to play it safe, you can also use the Angular CLI to update your project:
ng set defaults.styleExt scss
You should now see the
.angular-cli.json. Inside that file you should see, under the
defaults property, the
styleExt value set to
If you already has styles written in another format, you will need to rewrite them in the new format. Angular will not convert them.
Adding Clarion to the project can be done in 4 easy steps:
src directory create a new folder called
Note: Clarion will look for the Clarion Style Architecture in folders called
Using your command line or terminal, navigate to your new
In order to avoid overriding andy 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
In the root of your project open the
.angular-cli.json file and change the
styles value to
You should be able to use the Clarion CLI as you normally would. No additional configuration is necessary.