Allow include Paths for SASS plugin

Currently i'm mocking a web and i'm using Grunt and grunt-sass for that reason my @imports in the .scss files are

 
@import "foundation";
  
my Gruntfile.js has something like 
 
 
module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass
: {
      options: {
        includePaths: [
            'bower_components/foundation/scss',
            'bower_components/foundation-icon-fonts'
        
]
      },
      dist
: {
        options: {
          outputStyle: 'compressed'
        
},
        files
: {
          'css/app.css': 'scss/app.scss'
        
}        
      }
    },
 
  ...
 
but webstorm mark this with a "Cannot resolve import...". This does not stop me to continue developing but this error is annoying


Attachment(s):
Captura de pantalla de 2014-11-20 09:53:34.png
2
8 comments

You can try marking 'bower_components/foundation/scss' as resource root (mark directory as/resource root) to get the paths resolved relative to this folder

2

Hi Elena, that does not work.

For example, given this directory structure is:

    a/main.scss
    b/dep.sss

And "b" is marked as a content root.

IntelliJ can resolve the following import (incorrect from the Sass perspective):

    @import "/dep";

But IntelliJ cannot resolve the following import (correct from the Sass perspective):

    @import "dep";

This is a show-stopping bug for Sass support.

0

Hi Gleb,

it does work. See screenshot:

as you can see, `errors/global.scss` imports `root/values.scss` (where `root` is marked as Resources root) via 

@import "values";

, and IDEA doesn't show errors and correctly navigates to the file

1

Could this be something that got fixed recently? I am using IntelliJ 2016.3.1 Ultimate.

I've also opened an issue about this on the tracker https://youtrack.jetbrains.com/issue/IDEA-167628

Also, my resource root is actually in another Module that is a "Compile" dependency of this module.

 

So my structure is somewhat like this:

/google3/a/b/c <- module A, depends on module B as "Compile"
/google3 <- module B, marked as resource root

Files:

* /google3/a/b/c/scss/a.scss

* /google3/a/b/c/scss/b.scss:
  

    import "a/b/c/scss/a"; <-- does not resolve! 

    import "/a/b/c/scss/a"; <-- does resolve, but is not valid from Sass perspective, so does not compile!

0

Different IDEA modules is likely the issue. What module types do you use (Java, etc.)? Any facets enabled?

0

No facets are enabled. I tried this with Java and Python module types. Posted this to the youtrack issue.

0

I've recreated the issue and attached test project to the ticket. Not sure if the structure I've used matches yours (from your description, your configuration looks rather weird - one module is deeply nested in another, nested module depends on outer one, and your scss files seems to belong to both modules?)

0

Thank you, Elena!

Yes, it's a weird configuration, and this has to do with our monorepo structure. We shouldn't really have a module structure like this but for the moment we do.

0

Please sign in to leave a comment.