When using SASS how can I import a file from a different directory

Question

In SASS  is it possible to import a file from another directory   For example  if I had a structure like this   - root directory     - sub directory a         -  common scss         - template scss     - sub directory b         - more styles scss   template scss could import  common scss using  import  common  but is it possible for more styles scss to import  common scss   I tried a few different things including  import     sub directory a common  and  import     sub directory a  common scss  but nothing seems to work

User · Answer

I was have same problem and i found solution by adding path to file like    import  C  xampp htdocs Scss addons Bootstrap bootstrap     import  C  xampp htdocs Scss addons Compass compass

User · Answer

Looks like some changes to SASS have made possible what you ve initially tried doing    import     subdir common     We even got this to work for some totally unrelated folder located in c  projects sass    import                                projects sass common     Just add enough     to be sure you ll end up at the drive root and you re good to go   Of course  this solution is far from pretty  but I couldn t get an import from a totally different folder to work  neither using I c  projects sass nor setting the environment variable SASS PATH  from   load paths reference  to that same value

User · Answer

I ran into the same problem  From my solution i came into this  So here is your code   - root directory     - sub directory a         -  common scss         - template scss     - sub directory b         - more styles scss   As far i know if you want to import one scss to another its has to be a partial  When you are importing from different directory name your more styles scss to  more styles scss  Then import it into your template scss like this  import    sub directory b  more styles scss  It worked for me  But as you mentioned    sub directory a  common scss not working  That s the same directory of the template scss  That is why it wont work

User · Answer

If using Web Compiler in Visual Studio you can add the path to includePath in compilerconfig json defaults  Then there is no need for some number of     since the compiler will use includePath as a location to look for the import   For example    includePath    node modules foundation-sites scss

User · Answer

Look into using the includePaths parameter      The SASS compiler uses each path in loadPaths when resolving SASS  imports    https   stackoverflow com a 33588202 384884

User · Answer

node-sass  the official SASS wrapper for node js  provides a command line option --include-path to help with such requirements   Example   In package json    scripts          build-css    node-sass src  -o src  --include-path src        Now  if you have a file src styles common scss in your project  you can import it with  import  styles common   anywhere in your project   Refer https   github com sass node-sass usage-1 for more details

User · Answer

Gulp will do the job for watching your sass files and also adding paths of other file with includePaths  example   gulp task  sass   function       return gulp src  scss app scss        pipe   sass         includePaths  sassPaths             pipe gulp dest  css

User · Answer

This is a half answer   Check out Compass  with it you can place your  common scss inside a partials folder  and then import it with  import common  but it works in every file

User · Answer

Importing a  scss file that has a nested import with a different relative position won t work  the top proposed answer  using a lot of      is just a dirty hack that will work as long as you added enough     to reach the root of your project s deployment OS    Add the target SCSS path as a search target for SCSS compiler  This can be achieved by adding the stylesheets folder into the scss config file  this is function of the framework you are using        use  load paths at config rd for compass-based frameworks  Ex  rails       use the following code at scss-config json for fourseven meteor-scss        includePaths             node modules ionicons dist scss            Use absolute paths  vs  relative paths         Example  with fourseven meteor-scss  you can use    to highlight       top level of your project as per the following examplI    import     node modules module-name stylesheet

User · Answer

Selected answer does not offer a viable solution   OP s practice seems irregular  A shared common file normally lives under partials  a standard boilerplate directory  You should then add partials directory to your config import paths in order to resolve partials anywhere in your code   When I encountered this issue for the first time  I figured SASS probably gives you a global variable similar to Node s   dirname  which keeps an absolute path to current working directory  cwd   Unfortunately  it does not and the reason why is because interpolation on an  import directive isn t possible  hence you cannot do a dynamic import path   According to SASS docs   You need to set  load paths in your Sass config  Since OP uses Compass  I ll follow that with accordance to documentation here   You can go with the CLI solution as purposed  but why  it s much more convenient to add it to config rb  It d make sense to use CLI for overriding config rb  E g   different build scenarios    So  assuming your config rb is under project root  simply add the following line  add import path  sub directory a   And now  import  common   will work just fine anywhere   While this answers OP  there s more   Appendix  You are likely to run into cases where you want to import a CSS file in an embedded manner  that is  not via the vanilla  import directive CSS provides out of the box  but an actual merge of a CSS file content with your SASS  There s another question  which is answered inconclusively  the solution does not work cross-environment   The solution then  is to use this SASS extension   Once installed  add the following line to your config  require  sass-css-importer  and then  somewhere in your code   import  CSS myCssFile    Notice the extension must be omitted for this to work   However  we will run into the same issue when trying to import a CSS file from a non-default path and add import path does not respect CSS files  So to solve that  you need to add  yet another line in your config  which is naturally similar   add import path Sass  CssImporter  Importer new  sub directory a    Now everything will work nicely   P S   I noticed sass-css-importer documentation indicates a CSS  prefix is required in addition to omitting the  css extension  I found out it works regardless  Someone started an issue  which remained unanswered thus far

User · Answer

To define the file to import it s possible to use all folders common definitions  You just have to be aware that it s relative to file you are defining it  More about import option with examples you can check here

User · Answer

Using webpack with sass-loader I can use   to refer to the project root path  E g assuming OPs folder structure and that you re in a file inside sub directory b    import   sub directory a  common     Documentation  https   github com webpack-contrib sass-loader resolving-import-at-rules

User · Answer

You could use the -I command line switch or  load paths option from Ruby code to add sub directory a to Sass s load path  So if you re running Sass from root directory  do something like this   sass -I sub directory a --watch sub directory b sub directory b   Then you can simply use  import  common  in more styles scss

User · Answer

The best way is to user sass-loader  It is available as npm package  It resolves all path related issues and make it super easy

[import] When using SASS how can I import a file from a different directory?

Examples related to import

Examples related to sass