Including your override SASS partials in an Oracle JET theme
When you start a new Oracle JET project you are provided with the default ‘alta’ theme — which looks great!
If you want to change the colour scheme of the application, you can create a custom theme using the theme builder, which is even better!
But what if you want to take it one step further? Which I predict in the majority of more complex use cases, you will need to.
JET projects include an override.css file for you to do this, but only a css file, not a SASS file.
I spent some time trying to work out how to use the build tools to instead use an override.scss (and build to my web directory as .css), but eventually I decided to look more into creating a theme within my app instead, and use the inbuilt SASS compilation that comes as part of the JET theming.
I did not use the JET theme builder, I created the theme directly within my application and just used the theme builder as reference point. However, there should be no issues in using the theme builder instead, and there is a good blog from Geertjan on how to set this up.
Note: a benefit of not using the Theme Builder is that you can call the theme whatever you want – not just ‘myTheme’.
First of all, ensure SASS is installed and create a theme:
yo oraclejet:add-sass
yo oraclejet:add-theme customOverrideExampleOnce that has completed you will have your new theme created in the directory: src/themes/customOverrideExample.
To build your theme, run the following command:
grunt build --theme=customOverrideExampleNotice this compiles your SASS code into themes/customOverrideExample before it is copied into the web/css/customOverrideExample directory. Keep this in mind, as you want to ensure you always edit your theme file from within the src/themes directory.
If you want to serve your app with your new theme, run the following command:
grunt serve --theme=customOverrideExample
Now that we know how the three step process of theme serving works, lets go back to the source and open customOverrideExample.scss.
If you want to include your custom SASS, you can see the theme imports the customOverrideExample.web.overrides partial. This is a good place to include custom SASS, especially if you don’t have a lot to override… but if you are building a big, complex application you will likely want to break this down into seperate partials.
So for this example I am going to create a “general” partial, where I am going to override a common use case we’ve seen in alta: the max width property on ojInputText.
With this attribute removed, you can use the flex classes to size your input boxes appropriately.
This is a really simple example, but alongside the ‘general’ partial, your project could have partials for each of your views, or even modules, dependant on the size of your application.
One final point – if you are serving your application and you update and save a partial, your changes will automatically be picked up and your SASS will be reprocessed. Neat!
-DC
