[SOLVED] Is there a shortcut to root (/) for importing CSS/SCSS?

Things have gotten a bit silly in my React components due to having some deep structures (/both/components/owner/Toolbar/Toolbar.scss):

@import "../../../styles/variables.import.scss";

I tried using @import "/both/styles/variables.import.scss" but that errors out. Is there some way to refer to root in a Meteor project?

Hi, try it :

/project-folder/public/styles/variables.import.scss

@import "/styles/variables.import.scss";
1 Like

I suppose I could move the stylesheet to the public folder, but I’d rather not. Doesn’t that make it directly accessible by any browser?

Are you using fourseven:scss? In this case, you should try:

@import "both/styles/variables.import.scss";

i.e. without the leading slash. I am referencing all scss files this way, and it works.

You can also define a scss.json file on project root and set additional include paths.

{
  "includePaths": [
    ".meteor/local/build/programs/server/assets/packages/francocatena_compass"
  ]
}

This is useful for scss resources in packages. But for referencing scss from the project root, I did not need it.

1 Like

That did the trick, thanks! (the first solution)