Using LibSass PHPStorm without linting errors

Hello,

I've just started a new contract, and they're using LibSass rather than the standard Ruby setup.

The top of their main.scss file has the following:

@import "./node_modules/compass-mixins/lib/_compass.scss";
@import "./node_modules/compass-mixins/lib/_animate.scss";
@import "./node_modules/susy/sass/susy/language/_susy.scss";
@import "./node_modules/breakpoint-sass/stylesheets/_breakpoint.scss";

Each import has red squigglies and the error "Cannot resolve file..."

Is there a way to solve this?

This would also solve issues with warnings on compass mixins :)

 

9 comments
Comment actions Permalink

Could you please show your project structure with main.scss and ./node_modules/compass-mixins/lib/_compass.scss visible? 

0
Comment actions Permalink

Sure thing:

On the left is the `main.scss` file that pulls in all the variables from `node_modules` and `core`.

The whole lot is compiled using gulp to `parse/public/`.


As you can see, PHPStorm / my configuration doesn't like it at all :(

0
Comment actions Permalink

So you're missing node_modules directory in your project. Have you run `npm install` from a project root? This should install missing packages in `node_modules` directory defined in package.json file

0
Comment actions Permalink

From your screenshot it seems that you don't have node_modules in your project... And definitely they can't be found by specified relative path from your main.scss... Does your scss compile?

0
Comment actions Permalink

Ah, sorry, I DO have node_modules, but weirdly the "Vue for Idea" plugin hides it (see here).

I can disable the plugin and try again (but I do a lot of Vue work, so that would only work temporarily)

 

0
Comment actions Permalink

Where is `node_modules` located?

0
Comment actions Permalink

The project root

0
Comment actions Permalink

In main.scss please try typing

 

@import "./<cursor>"

 

Would it suggest node_modules directory?

0
Comment actions Permalink

Hey Dmitry, nope, it's seeing the parent folder.

This works:

@import "/node_modules/compass-mixins/lib/_compass.scss";
@import "../../node_modules/compass-mixins/lib/_compass.scss";

 

I'm not familiar with the project's Gulp build process or the way the plugins reference the folders, but I would imagine that changing the paths would certainly break things.

However - I just marked the project root folder as "resource root" and now the squigglies disappear and I can hyperlink to the Node folder.

Has that solved it!?

As to the related problem you mentioned earlier, `@include breakpoint()` still shows up as "Cannot find mixin 'breakpoint'... "

 

Are we getting closer?

0

Please sign in to leave a comment.