Default app.scss node_modules path highlighted in error in PhpStorm

I have the same setup and no errors, all mixins show up as well. Maybe make sure PhpStorm finishes indexing the node_modules directory!

That's what I meant. It it strange as I'm unable to get any code (path) completion unless I prepend the path with a "/".

yeah agree. I forgot, which OS are you on?

Just use 'bootstrap' and it should work.

@import 'bootstrap'

Hi @mstnorris ,

Heh I get the same as yourself! I put a forward slash at the beginning of the path and PHPStorm was able to locate the reference, but then the Gulp build failed!

Removed the slash as it originally was. PHPStorm complained about the reference. The Gulp build ran as expected.

Strange indeed!

I think Phpstorm has some bug

P.S. when i replied to this thread 2 hours ago, i didn't have that problem, then I ran some ( homestead & vagrant ) commands in the root of my project, now i see this issue too! I have OS X

Hi all,

Had a play and it does work if you do this:

@import '../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';

I'm on Windows (yeah ok!) and it could be the way the file is being referenced, either by PHPStorm or Windows. Are any Mac users seeing the same behaviour?

gulp works fine but PhpStorm doesn't like this path. Why?

You are trying to import a file from a none existing path! Speaking relatively to the current app.scss directory. This is not a PhpStorm issue, you simply need to provide the correct path for any smart IDE to be able to understand it and navigate to it.

So either one of these ways will work on most OS if called from resource/assets/sass/app.scss

@import '../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';
@import '/node_modules/bootstrap-sass/assets/stylesheets/bootstrap';

this will work with Gulp because gulp file is setting in the root directory of the project ( same as node_modules ), so Gulp will understand this path and will import and compile the script.

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

I can understand why gulp find the file - as you run it from the project root. But you'd think there would be a way in the IDE to tell it what paths to use for @import statements such that one can avoid the ../../../ part just to please the IDE. The purpose of an IDE is less work - not more.

@desloc yep

Hi @desloc just wanted to say thanks as your solution, adding

../../../

solved my problem in Atom. Thank you,

@DESLOC - It works for me! xD