Feature request: define include paths

[mafredri]

I would like to be able to configure include paths so that @import statements can reference the correct file.

Consider the following configuration:

"scss.includePaths": ["src", "global/lib"]

And a .scss-file:

@import 'variables';

The following paths (relative to project root) would be considered as valid imports (and the intellisense would also recognize the first match as the actual import):

src/variables.scss
src/_variables.scss
global/lib/variables.scss
global/lib/_variables.scss

Does this seem reasonable?

PS. Discovered this extension today, loving it so far. Keep up the good work!

[muuvmuuv]

Would be really useful when developing with libraries like bootstrap where the pulled SCSS files are in node_modules folder. With includeFiles I could tell vscode-scss to take variables from bootstrap as well.

[octref]

Can you clarify why this is needed? And how are you compilation this without sass errors?

When you import variables, it should only resolve to either variables.scss or _variables.scss.

[savilaf]

We need this for projects made with Angular. We define in the configuration file the folder where SASS has to resolve all the imports. Example (angular.json):

"stylePreprocessorOptions": {
  "includePaths": [
    "src/styles"
  ]
 }

On a component style:

@import 'utils/variables';

[ghaschel]

+1 for this feature. I'm unable to get autocomplete from functions imported from node_modules folder via @import ~module/sassfile

[jabuj]

+1
For my webpack project I have set webpack and sass-loader include path as so:

// ...
options: {
  includePaths: [path.resolve(__dirname, './src')],
  // ...
}
// ...

So that instead of
@use '../../../../styles/variables/colors';
I can write
@use 'styles/variables/colors';
That compiles just fine, so I would like some intellisense for that.

[SuneRadich]

I too would like to see better support for angular projects. In an angular project, you can define includePaths in angular.json. This tells the angular setup (webpack under the hood if I am not mistaken) where to look for scss files. This works fine when you compile the code - but VS Code is not able to show intellisense for imports.

[alastair-todd]

Webstorm handles this in a really simple, effective way - you right-click (a fabulous invention - hint) and there is an option to include the folder as "assets". From then on sccs @imports consider these paths and viola you can navigate to the files

[ekr3peeK]

Plus one from me too for this feature.

[dbwodlf3]

I hope that vs code support this feature.

[kazamov]

I also need this feature for the Nrwl Nx workspace to share styles between libs

[mathiasrw]

4 years and this is still a feature request?

This is so important for scss development!

[JakeChampion]

@mathiasrw, feel free to add this feature if you think it is so important for scss development

[stasberkov]

Any update on this? I also would like to have this feature.

[JonasLuechau]

This one would be great for angular projects, without it you always have to use relative paths which is really annoying in big angular applications.

[muuvmuuv]

Is this still the case? VS Code has native SCSS support now, and you only need this extension for SASS, as I am aware.

[JonasLuechau]

This still doesn't work sadly. "@use 'colors';" doesn't work, "@use '../../colors';" does (assuming it would be a correct path). Both builds fine, but no autocomplete or being able to find the file is hard to work with.

Is this not in the scope of the extension?

[LeonFedotov]

please add support for this, this is a big pain point in my process !

[sutkovoy]

up

[stasberkov]

Why issue has label "Need More details"? What else details are needed?

[Nagell]

There's no need for any more details. A contributor is rather needed, as this project seems to be dead.

[fireMan-34]

Some Sass is more useful for myself. The extension id is SomewhatStationery.some-sass .

[stasberkov]

Some Sass is more useful for myself. The extension id is SomewhatStationery.some-sass .

Yep, I switched to it. I also installed dgeibi.alias-tool for non-relative path mapping.