SASS inspector on multiple folders

We have our SASS .scss files in multiple folders and each folder has multiple files. The inspector seems to find all the files but doesn't appear to put them all together like it does with JavaScript so we have all kinds of warnings/errors. It says it can't find imports, variables, mixins, functions, etc. All the necessary files are included. What is the key to getting the SASS inpectors to find everything? Here is an example of a SASS folder:

stylesheets
  |--_theme.scss   |--_theme-variables.scss   |--_functions.scss   |--_application.scss   |--_variables.scss   |--_mixins.scss   |--_all.scss



For example, _application.scss complains it can't find variables which are defined in _variables.scss
8 comments
Comment actions Permalink

Hi Mike,

All imports in sass are resolved relative to Resource roots. In common case to import _mixins.scss file (from your example) you should type @import 'stylesheets/mixins'. If you want to import your files by relative to 'stylesheets' directory (@import 'mixins') you should mark stylesheets directory as Resource root (Right click on directory | Mark Directory As | Resource Root)

0
Comment actions Permalink

It appears that WebStorm isn't aware of the base compass includes. Do I need to make a resource root to them?

0
Comment actions Permalink

Yes, if it possible. Note, that it will solve the problem only if you use explicit imports of compass resources. Otherwise see issue about compass support and feel free to vote for it. http://youtrack.jetbrains.com/issue/WEB-5802

0
Comment actions Permalink

Voted and added a detailed comment to the issue.

0
Comment actions Permalink

Quite old topic, but I have a case, that is discussed here.

zolotov wrote:


Hi Mike,

All imports in sass are resolved relative to Resource roots. In common case to import _mixins.scss file (from your example) you should type @import 'stylesheets/mixins'. If you want to import your files by relative to 'stylesheets' directory (@import 'mixins') you should mark stylesheets directory as Resource root (Right click on directory | Mark Directory As | Resource Root)

Seems, that "Resource root" is used only internally by phpStorm / webStorm, and doesn't affect scss compilator.

I've marked one of my folders (\typo3conf\ext\myext\Resources\Private\Sass) as "Resource root", and phpStorm now is able to recognize

@import "mixins"; 

which is located in that folder, but scss watcher still complains, taht it can't find file in include pathes, therefeore I need to modify watcher's arguments and add

 --load-path "$ProjectFileDir$\typo3conf\ext\myext\Resources\Private\Sass"


Am I doing something wrong or it is recommended way?

PhpStorm 7.1.3
Sass 3.3.7

0
Comment actions Permalink

Hi Viktor,

Indeed resources root doesn't do anything with compiler, it just hints for IDE to inspect your code properly. As far as I know the '--load-path' parameter is the proper way for this issue.

0
Comment actions Permalink

Hi, Alexander.

Thank you for your explanation - now I can feel calmer :)

0

Please sign in to leave a comment.