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


#1

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?


#2

Hi, try it :

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

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

#3

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?


#4

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.


#5

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