vscode-scss
vscode-scss copied to clipboard
mrmlnc
Feature request: define include paths
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!
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.
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.
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';
+1 for this feature. I'm unable to get autocomplete from functions imported from node_modules folder via @import ~module/sassfile
+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.
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.
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
I also need this feature for the Nrwl Nx workspace to share styles between libs
4 years and this is still a feature request?
This is so important for scss development!
@mathiasrw, feel free to add this feature if you think it is so important for scss development
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.
Is this still the case? VS Code has native SCSS support now, and you only need this extension for SASS, as I am aware.
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?
There's are no more details needed. A contributor is rather needed, as this project seems to be dead.
