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

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

Great! Thanks for confirming.

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