SASS @import

I’m extremely frustrated and have searched for a solution both here and across the web without luck.

Every time I try to use @import in a scss file I am getting a warning that the file is not found. The file can be in the same folder or in a subfolder.

Creating a new project with only two files (test.scss and import-test.scss), I still encounter the same error but I am able to compile.

Using an existing development directory and adding it to a new project, I get the file not found or is unreadable warning and compiling errors on the first @import.

My file structure is:

  • root
    – assets
    ---- sass
    ------ base
    -------- _typography.scss
    ------ styles.scss

I am attempting to import _typography.scss into styles.scss using “@import ‘base/typography’;”.

I’ve attempted using the full file path from the root, including the underscore, including the file extension, and every combination therein with no luck.

What am I missing?

I really want to like KomodoIDE but at this point am extremely frustrated and ready to just head back to a plain text editor.

I’m running on Linux Mint 17.3 and all stated dependencies are installed (although the Komodo install process warns gtk+2.0 is missing even though it is there.

Well first off, your problem has nothing to do with Komodo. Komodo does not compile your SCSS file, that’s SASS. It would be the same thing regardless of what editor you use.

That said, I tried following what you said and it seems to work without issues:

$ mkdir test
$ cd test
$ echo "@import \"base/typography.scss\";" > style.scss 
$ mkdir base
$ touch base/_typography.scss 
$ sass style.scss

Runs without issues.

What command are you running to compile your SCSS? And from where are you running it?

Note this may be a question better suited for Stackoverflow, because as said it is not related to Komodo, it’s a SASS question.

Thank s for the reply Nathan.

I am using the build command added through the compile-sass addon.

Using the same files with Netbeans IDE (builtin compile on save function) or Sublime Text 3(sass-build addon), the files compile without issue which is what led me to think it was a Komodo issue.

Prior to the build procoess, Komodo does alert me to the error of not being able to find or read the file specified in the @import statement.

The SASS build addon is a third party addon, it is not provided or supported by us. However the developer that made it does frequent our forum.

@babobski I believe this would be your addon? :slight_smile:

As an alternative, here’s a simple Userscript that you could configure to run on file save, modify it as needed.

This requires you to have your environment variables properly configured (Preferences > Environment), Komodo should pick these up automatically but on some systems you may need to make additional adjustments. The main things you’ll want to set are the PATH, GEM_PATH and GEM_HOME.

(function() {
    
    var filePath = require("ko/views").current().filePath;
    if (filePath.substr(-5).toLowerCase() != '.scss')
        return;
    
    var koFile = require("ko/file");
    var output = koFile.join(koFile.dirname(filePath), "..", "css",
                             koFile.basename(filePath).replace(/.scss$/i,'.css'));
    
    var p = require("ko/shell").run("sass", [filePath, output]);
    
    p.stderr.on('data', console.log);
    
})();
1 Like

Nice. I’ll try that and get back with you. It may be tomorrow before I get a chance.

@dusty sorry for the inconvenience, if created the sass compiler because the implementation is almost the same as the less compiler. The less and sass compiler are based on the browser implementation, the only problem with this implementation is, it can’t handle imports. I fixed this by processing the imports within the addon.

Self I’m using less, and not sass. but is see i missed a critical function in the imports.
Currently it’s importing the imports as it is, so calling the import base/typography it will try to include ../base/typography.scss and will not look for the ../base/_typography.scss file.
This is a bug in the addon, opened a issue for it.

I’ve updated the less compiler to work without userscript’s/ macro’s and has a better autocompletion.
I’m currently updating the sass compiler to reflect those changes, while I’m add it, i will look in to this bug.

I think i will role out this update at the end of this weekend or at the beginning of next week.
In the mean time to work around it, you will have to include the underscore in the import statement to get the import working, or you can go for the solution @nathanr provided

1 Like

Updated the Sass Compiler to the latest release, imports should now be working as expected.

@babobski I was able to update the plugin this morning. The imports are working better, but I have run into one more issue with the import function. If I’m in folder B and want to import a file from folder C using the following:

@import ‘…/C/file’;

The builder looks for the file in the root directory instead of C. If I leave off the …/ it looks for the file in folder B.

If needed, I can post this elsewhere.

@nathanr Thanks again for your help. The script you provided was a charm.

@babobski maybe it would be easier if you simply invoke the command line version of SASS? You can still provide all the additional useful tooling around it but you don’t need to reverse engineer any aspects.

It’s what I am doing right now. :slight_smile: I left the last message more as a follow up with you and @baboski. I described the issue I ran into with the sass-compiler plugin after updating just to let Baboski know his ‘bug fix’ did work but also uncovered the issue with the directory navigation portion of the @import command.

I’m up and running and back to working on the design for a customer using Komodo. Still learning some of the ins and outs, but I am liking the program overall.

Once I am more familiar, I’ll do what I can to help the community.

Doh… My brain skipped right over you addressing your comment to @baboski, @nathanr. Oops… still, if I can get my head above water on this customer project I am tackling, I’d be more than happy to help with the sass plugin, if wanted.

Thanks guys for all the help, @dusty the bug is confirmed, just at home and tested it.
When i go one directory back and one forward, it’s working fine, but when i go one back and two forward, i still go one up.
I’ve looked to the example @nathanr supplied but i can’t run the commandline version of sass. I also don’t have the required environment variables, I’m missing the GEM_PATH and GEM_HOME. When i google search it, i find that it’s for ruby.
But i don’t have it install, for first i will look at the code i now have, i now know it’s going wrong in the function that calculates the new path if back directories are present.
@dusty I’m always open for help, if you think the code can be improved somewhere, or if you have a additions, you can always leave a message or create a pull request.

How did you install the CLI version of SASS? I used the Ruby version, hence the environment variables.

@nathanr i don’t have SASS installed, the sass compiler is a pure javascript implementation.

@dusty can you test the latest release(beta), updated the back directories function.
Tested it and it’s working for me on:
@import '../../../main'; @import '../test2'; @import '../../_reset';

@nathanr tried to install SASS yesterday, i installed ruby(windows installer) and then the sass gem.
Do you have to add the GEM_PATH and GEM_HOME you’re self?
Komodo detects that sass is installed, but I’m getting linting errors, about path’s that can’t be found.
Also i still can’t run the userscript (i think because i don’t have the variables).
And do you have to install sass for the linting to work?

@babobski I checked it this morning, and it looks to do the trick. :beer: I’ll message you if I run across anything else!

Thanks for the support!

@dusty that’s great to hear, glad to help you out!