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.
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.
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.
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.
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
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.
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.
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.
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";
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.
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",
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'));
});
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.
use
:load_paths
atconfig.rd
for compass-based frameworks (Ex. rails)use the following code at
scss-config.json
forfourseven/meteor-scss
{
"includePaths": [
"{}/node_modules/ionicons/dist/scss/"
]
}
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";
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
.
Look into using the includePaths parameter...
"The SASS compiler uses each path in loadPaths when resolving SASS @imports."
Source: Stackoverflow.com