Using tsconfig aliases to import CSS | Astro Lounge | Page 1

north elm Mar 23, 2023, 10:16 PM

#

Hello, I'm trying to use an alias so that I can import my css with this import line:

import "@styles/variables.scss";

I thought I'd just need to adapt my tsconfig.json by adding the baseUrl and paths:

{
  "extends": "astro/tsconfigs/strict",
  "baseUrl": ".",
  "paths": {
    "@styles/*": ["src/styles/*"]
  }
}

Unfortunately I get an error when it compiles:

error Cannot find module '@styles/variables.scss' imported from '/Users/dsa/Documents/Local/dsa/src/components/navbar/NavbarDesktopMenu.astro'
Error: Cannot find module '@styles/variables.scss' imported from '/Users/dsa/Documents/Local/
dsa/src/components/navbar/NavbarDesktopMenu.astro'

neon heron Mar 23, 2023, 10:25 PM

#

north elm Hello, I'm trying to use an alias so that I can import my css with this import l...

You might need to simply restart the Astro dev environment. Your setup looks correct

north elm Mar 23, 2023, 10:27 PM

#

Unfortunately no look with restarting. The VSCode wouldn't give me auto completion either when I write the import statement, hence I assume something is wrong

neon heron Mar 23, 2023, 10:30 PM

#

What version of Astro? I know that 2.1.4 had a regression with imports, it's supposedly fixed in .6

north elm Mar 24, 2023, 10:45 AM

#

I was on v2.0.18 and just updated to v2.1.6, but still the same issue :/. It also doesn't work with components so doesn't seem to be exclusive to CSS imports

safe flare Mar 24, 2023, 11:16 AM

#

In 2.1.6 we had to revert the alias support in CSS because it was breaking things

#

So it was only "supported" in like 2.1.4 and 2.1.5, but it didn't really work

north elm Mar 24, 2023, 11:17 AM

#

Hm ok, should it still work with normal astro files like the components directory?

safe flare Mar 24, 2023, 11:17 AM

#

Yeah, aliases should work everywhere else

#

It's only in CSS that it doesn't work

#

Oh, looking at your example, you're importing a CSS file using an alias, that should work!

#

It's only in <style></style> block that it shouldn't work

north elm Mar 24, 2023, 11:18 AM

#

Okay I just removed the alias for CSS, but it still doesn't seem to work for the components directory which only contains astro files

safe flare Mar 24, 2023, 11:19 AM

#

Hmm, not sure about that one, let me try on my end

#

I know there was an issue at some point with aliases starting with @, but I'm not sure if it's still the case or not

north elm Mar 24, 2023, 11:19 AM

#

#

I basically copied that from the astro docs where @ was also used

safe flare Mar 24, 2023, 11:20 AM

#

Does the issue only happens in the editor, or also in Astro itself?

#

Copied the settings from the docs and everything works for me: v

#

Oh, I see the error

north elm Mar 24, 2023, 11:22 AM

#

Astro can't compile, so both VSCode and Astro complaint about it

safe flare Mar 24, 2023, 11:22 AM

#

Your tsconfig.json is wrong

#

You have everything at the root, whereas the baseUrl and paths options goes into compilerOptions

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@assets/*": ["src/assets/*"]
    }
  }
}

north elm Mar 24, 2023, 11:23 AM

#

DAAAAMN 🤦🏻‍♂️

#

Now it works! Sorry for this, thank you for the help!

#Using tsconfig aliases to import CSS