@import external scss files with variables: does it work?

Author Posts

adkoen

Hi, I can’t get this to work. In the main Microthemer stylesheet I want to @import an external scss file with my sass variables. Whatever I try, Microthemer keeps complaining it cannot compile the scss file. Is there some sort of special way I need to do this or does it not work?
thanks,
Koen.


Sebastian

Hey Koen,

Sorry for the bother. I recently updated the SCSS compilation library without realising I needed to update the import path. I’ve just released MT version 5.2.5.7 which fixes the issue. This should be available as an automatic update in your WP dashboard in a few minutes.

SASS imports are relative to the following directory:

/wp-content/micro-themes/

This is so that the path structure will be the same as when using a regular CSS @import. I recommend that you create the following custom folder with FTP:

/wp-content/micro-themes/scss/

So in the Microthemer code editor you would import files using the following syntax:

@import 'scss/variables.scss';

p {
    background: $myVarInVariablesFile;
}

Or, if you prefer to keep the SCSS files in an /scss directory in your theme, you would import using the following syntax:

@import '../themes/my-theme/scss/variables.scss';

That should get you up and running. Please let me know if you encounter any other issues.

Thanks,
Sebastian


adkoen

Fantastic, working now 🙂 Using a scss file from a custom plugin.
Thank you.


Sebastian

Great! Thanks for confirming.


adkoen

Hi Sebastian,
any idea how to get this @import to work in multisite? I have the scss files ready in my plugin, but can’t seem to reach it, or the @import does not work in multisite?


Sebastian

Hey Koen,

I haven’t tested SCSS importing on multisite. But I would expect it’s possible to get things working. The location of the import folder might be a bit different. I have a feeling this can vary a bit depending on the multisite setup, so I think the best way to move forward is for you to install this modified version of Microthemer on your multisite install:

https://themeover.com/misc/scssimport/microthemer.zip

When you save your settings, it will tell you the SCSS import path via a notification at the top right of the interface. Hover over it to see the import path. For me it looks like this:

/home/vagrant/Code/microthemer/website/wp-content/micro-themes

Once you know this for sure, you can define a path to the plugin file at the top of MT’s code editor. You can then upgrade to the latest version of MT so you don’t get the SCSS path notification.

I hope that helps. Let me if you’re still stuck.

Cheers,
Sebastian


adkoen

Hi Sebastian,

This sure is fantastic support, but unfortunately the import path is empty: http://cloud.webmatic.be/95f11f57901b

I think the active-styles.css is written in a folder setup like this: ‘/wp-content/uploads/sites/2/micro-themes’. Where the 2 represents the site number in the multisite.

So I thought I could get to the plugin by doing something like this:
@import ‘../../../../plugins/myplugin/file.scss’
But nothing happens. Any idea perhaps?

Thank you once again for your time.


adkoen

And I just added the scss to the micro-themes folder in uploads. Shouldn’t this just work in that case:
@import ‘filename.scss’;?


Sebastian

Hey Koen,

Yes, your last attempt should definitely work. But perhaps the fact that the import path was blank in the modified version of MT I gave you is telling. There may be a multisite compatibility issue.

Would you be able to send me access details for your multisite install via our secure contact form? Or a clone of it perhaps, so I can upload different versions of MT with helpful debug output?

If not, I will see if I can replicate the issue on a vanilla multisite install.

Cheers,
Sebastian


adkoen

Fantastic, send you an email with login credentials.
thanks.
Koen.


Sebastian

Thanks Koen,

I managed to identify and fix an issue with the SCSS path on multisite. MT’s paths are normally adjusted for multisite, but the SCSS feature wasn’t tapping into this. I’ve just released version 5.2.5.8 which I think fixes the issue. I can’t be certain because when I tried to view the SCSS files they weren’t at the location show in MT:

/wp-content/plugins/webmundo/webmundo-variables.scss

Have you moved them?

Please let me know how you get on!

Cheers,
Sebastian


adkoen

Hi Sebastian,

I can confirm all is working now! I can import the scss files when they are in the microthemes folder and I can import the same files when they are in my own plugin folder.
Those scss files were present in the plugin subfolder. So there probably something else wrong.
Anyway, it works now and I’m happy. Happy with your great support too!

One question:
Are you planning on changing the location and/or name for your active-styles.css folder (the microthemes folder in uploads) anywhere in the near future. I was thinking of writing my scss files to that specific folder 🙂

Awesome Sebastian, good luck with your next big update!


Sebastian

Excellent, we got there in the end!

And no, the micro-themes folder won’t change 🙂

Cheers,
Sebastian

You must login or register to reply to this topic.