Search code examples
csssassbulma

Hwo to override a generic setting in Bulma


In an app that uses Bulma, there is a requirement to display URLs with an underline. However, Bulma's generic.scss file specifies that anchor tags have no text decoration (see here). I looked through the Bulma customization docs for a way to override this setting but do not see any variables to do that. The current work around is to put class="is-underlined" in all the anchor tags in the app...less than ideal. Is there a way to override this in Bulma?


Solution

  • Within your project you could always update/change the styles, either by

    • adding some SCSS file before or after the bulma.scss
    • adding an additional CSS file in your index.html

    Using either approach, you can override just about anything. Here's how I do it for additional print styles on link URLs: https://github.com/suterma/bulma-print/blob/main/sass/helpers.scss

    You could do for example:

    /* underline link URLs */
    a[href] {
      text-decoration: underline;
    }
    

    And add this AFTER your inclusion of bulma.