Custom SCSS Best Practices

Search Best Practices - Search Front-End
1

Hello,

I’d like to add some custom styling to my Answers site. I’m making enough changes that I don’t want to include them all within the answers.scss file, I’d prefer to separate them into smaller dedicated scss files.

The frontend module warns that

the other SCSS files in the repository will be overwritten by the theme upon upgrading

So I wanted to check if there’s support for what I’m trying to do, and if so, what the recommended place to put my custom SCSS file would be.

From my testing, if I make new files in static/scss and import them in answers.scss they are not changed when I run jambo upgrade. But is this guaranteed to be the case, or should I assume that these files could be removed? Is there a ‘safe’ place to put them? Is the quoted comment only referring to scss files within the theme folder?

I tried creating a file outside of the static/scss directory since that felt like it might be safer, but I was then unable to import it from answers.scss.

2

Hi Ben,

Thanks for bringing this up! We’ve actually updated our theme to preserve additional SCSS files for exactly your use case - separating out your Answers SCSS for better organization.

To confirm, here’s the steps you should take to add additional SCSS files

  1. Create separate files in your static/assets/scss folder. Here, I’ve created two separate files for my header SCSS and footer SCSS.
    image
    image580×504 17.9 KB
  2. Import this SCSS in your _default.scss file. You’ll need to override the theme - select the static/assets/scss/answers/_default.scss file when you override theme. At the bottom, you can add your additional files here via import statements.
// HH files
@import "../answers";
@import '../header.scss';
@import '../footer.scss';

Let me know if this helps! We’ll make sure to update our module as well.

1 Like
3

Thanks Amani!

Just to check, would it also be ok to import my new files from the answers.scss file so I don’t need to override the theme further?

4

Should be totally fine! Thanks for checking Ben!

1 Like