Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[css] Custom aliases in CSS file resolution

See original GitHub issue

Please read from tsconfig/jsconfig to resolve SCSS modules. My suggestion to make this reliable is to simply only allow the import aliases to work inside of an aliased directory, and in every subfolder starting from the tsconfig/jsconfig as the root, so that we can theoretically open huge projects with weird build settings and have a sane default for it. The tsconfig/jsconfig essentially define majority of these weird quirks such as these path aliases for the entire IDE, and we should just stick to allowing this to continue even if it “makes no sense” to read from these files for what is “just SCSS”.

If this won’t be supported, we could at least make it possible to define these aliases in the .vscode settings.json and then use those paths across the IDE as the standard. No matter what though, we need these path aliases as for large projects not being able to jump to the definition of an imported module is very annoying.

Issue Analytics

State:
Created a year ago
Reactions:30
Comments:8 (2 by maintainers)

Top GitHub Comments

1reaction

aeschlicommented, Dec 19, 2022

The description says: to resolve SCSS modules

0reactions

Mechitecommented, Dec 19, 2022

Why the name change? Imports being resolved in this way should be supported for all CSS formats, not just SCSS.

Top Results From Across the Web

Webpack - steps to implement aliases inside CSS

If your webpack resolve paths are: alias: { 'fonts': path.join(__dirname, 'assets/fonts'), 'images': path.join(__dirname, 'assets/images') }.

Using CSS custom properties (variables) - MDN Web Docs

Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific ...

Webpack & CSS - 3. Refactoring and Aliases - YouTube

Now we can refactor our CSS into smaller files and use our Javascript to determine how it's imported. We can also use Webpack's...

Advanced Features: Absolute Imports and Module Path Aliases

Configure module path aliases that allow you to remap certain import paths. ... Built-in CSS Support ... Custom `Document` · Custom Error Page....

Configuring Vite

Configuring Vite #. When running vite from the command line, Vite will automatically try to resolve a config file named vite.config.js inside project...