Can we only override _variables.scss for customizing Ionic?

ionic-v1
1

Hi, I’m currently in the process of customizing my Ionic project which uses tabs inside a card, which is quite similar to the Cards showcase in the documentation. I tried changing the tab-item text opacity to 1 in _tabs.scss but the changes doesn’t seem to be reflecting. Does this mean we can only customize the values inside the _variables.scss file? Thanks!

2

you can override anything in ionic as long as you are importing their scss correctly. For example, your custom variables would need to be imported before ionics variables, and your custom scss imported after ionics components scss.

How are you importing your scss?

3

Hi, thanks for the reply. I’m directly adding my custom scss in scss/ionic.app.scss. Thanks for the info about adding custom scss after Ionic components, as that got my customization working.

Another issue I noticed though, whenever I transfer my custom scss to another file and import them in scss/ionic.app.scss the live reload doesn’t update. I have to make changes to scss/ionic.app.scss (i.e. adding and deleting a space) before live reload updates the preview.

4

no prob. the livereload may not be updating because there may be an error? I have a main.scss file which imports all my partials (scss files prefixed with an underscore) similar to how ionic.scss is in their source.

I first import my custom variables, then ionics scss file, then my mixins and custom components. My build process just looks at main.scss and compiles everything to main.css which is referenced in my index.html.

Basically what ionic is doing. The benefit there is that your partials are clean and cohesive rather than having to maintain a huge file.

Just make sure that when you separate to different files you’re prefixing them with underscore so they will be recognized as a partial. And when you import the partials in your main file, you don’t need to include the underscore as sass is smart enough to pick it up.

Good luck!

5

My terminal doesn’t seem to be reporting any errors. I’m currently importing my custom variables like so:

@import "www/css/myVariables";

which is supposed to load myVariables.scss right?

My customizations are pretty minimal so I probably won’t need to break down my file into partials. Basically, what I’m currently doing is below:

// Include all overridden _variables before Ionic SCSS
@import "www/css/myVariables";

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

// Include custom SCSS after importing Ionic SCSS
@import "www/css/style";
6

which location is your main file in? The paths should be relative to your main file. also myVariables are your partials.

Also are your scss files in the css directory? Or in a scss directory like you specified in a previous post (scss/ionic.app.scss)

This is the way I would do it using the file names you already have, and assuming that your source is committed to www.

In www/scss have the following files.

ionic.app.scss
_myVariables.scss
_style.scss

The in your ionic.app.scss file, import the ionic scss and your partials
/* Main Stylesheet */
@charset “UTF-8”;

@import
    // Variables
    "myVariables",

    // Ionic
    "../lib/ionic/scss/ionic",

    // Components
    "style";

Just remember you dont need to specify the underscore and your import file paths should be relative to your ionic.app.scss file.

Then if your using grunt or gulp to generate your css, you would only reference your ionic.app.scss file (if your compiler trys to compile the individual files it may fail since they might require styles from other files… just make sure only your ionic.app.scss file is being referenced by the gulp/grunt task)

Then in grunt/gulp you would specifiy your output file to be www/css/ionic.app.css which will be referenced in your index.html