SCSS file and folder setup

Squiz Matrix General Discussion
1

Looking for some advice on our current SCSS & CSS file and folder set up.

I am setting up a dev environment and we’re going to use SCSS going forward. We have this as our current set up and order but the @import doesn’t seem to be working:

SCSS-file-setup

  • which file do the variables go in?

  • does the other file need to “@import” the variables file?

  • do they all need listed in the ‘minified.css’ file?

Thanks
Innes

1 Like
2

Hi @innesz,

Within a SCSS Design File, you use the "mysource_files/file.scss" syntax to import the child *.scss files beneath it. See the SCSS Design File docs and the screenshot below:

image
image751×445 53.7 KB

Hope that helps!
–iain

2 Likes
3

Hi @isimmons, thanks for coming back to us on this and sharing the screenshot. We were using the @import and href asset number to reference the child .scss files. I will try this set up.

Also, we should be detailing all of our variables in the global css file (parent asset) and then referencing these in the child assets so they are pulled through via the import syntax?

Thanks again
Innes

1 Like
4

Hi Iain, still seem to be getting an error even though I have added the mysource files syntax:

Warning Error occured when compiling SCSS content: mysource_files/_homepage-section-6.scss file not found for @import: line: 1, column: 0

1 Like
5

Hi Innes,

We use the following syntax to import files in our SCSS Design Files, if it helps.

@import "./?a=50613";

If anyone knows a reason we should not be doing it that way, I’m happy to hear it. :slight_smile:

Cheers,
Lisa

2 Likes
6

Hi Lisa,

Yes that is correct, a Squiz dev has come back to me to try any of the below methods:

@import "./?a=1234";
@import "%globals_asset_url:1234%";

the mysource version is typically a directory within the Git repoitory.

Still getting issues with our setup so they are investigating. Will post the fix on here once we get there.

Thanks

1 Like
7

We have now resolved this.

Thanks @isimmons we had a reply from Squiz support and have set the files up with all @imports at the top of main-scss.css and all childs have the relevant variables at the top to compile correctly.

2 Likes