astro config - how to add aliases for scss files? | Astro Lounge | Page 1

somber helm Nov 7, 2022, 6:44 PM

#

so this is my folder structure

project-name
├─ .git
├─ .github
│ └─ workflows
│ └─ deploy.yml
├─ .gitignore
├─ .vscode
│ ├─ extensions.json
│ └─ launch.json
├─ astro.config.mjs
├─ package-lock.json
├─ package.json
├─ public
│ ├─ android-chrome-192x192.png
│ ├─ android-chrome-512x512.png
│ ├─ apple-touch-icon.png
│ ├─ favicon-16x16.png
│ ├─ favicon-32x32.png
│ ├─ favicon.ico
│ └─ site.webmanifest
├─ README.md
├─ robots.txt
├─ src
│ ├─ assets
│ │ ├─ files
│ │ │ └─ zvonimir-prpic-cv.pdf
│ │ └─ fonts
│ │ └─ Nunito-Regular.ttf
│ ├─ components
│ │ ├─ Footer
│ │ │ └─ Footer.astro
│ │ ├─ Greeting
│ │ │ └─ Greeting.astro
│ │ └─ Header
│ │ └─ Header.astro
│ ├─ constants
│ │ └─ iconLinks.ts
│ ├─ env.d.ts
│ ├─ icons
│ │ ├─ brokenHeartIcon.svg
│ │ ├─ emailIcon.svg
│ │ ├─ githubIcon.svg
│ │ ├─ lightbulbOffIcon.svg
│ │ ├─ lightbulbOnIcon.svg
│ │ └─ linkedinIcon.svg
│ ├─ layouts
│ │ └─ Layout.astro
│ ├─ pages
│ │ ├─ 404.astro
│ │ └─ index.astro
│ ├─ scripts
│ │ ├─ getCurrentTheme.js
│ │ └─ typingAnimation.js
│ └─ styles
│ ├─ global.scss
│ └─ scss
│ ├─ variables
│ │ ├─ _breakpoints.scss
│ │ ├─ _colors.scss
│ │ ├─ _spacings.scss
│ │ └─ _typography.scss
│ ├─ _layout.scss
│ ├─ _reset.scss
│ └─ _theme.scss
└─ tsconfig.json

without writing the whole path

#

so this is my config file now

#

import { defineConfig } from "astro/config";
import path from "path";
import url from "url";

const __filename = url.fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// https://astro.build/config
export default defineConfig({
  site: "project name...",
  resolve: {
    alias: [
      {
        find: "styles",
        replacement: path.resolve(__dirname, "./src/styles"),
      },
    ],
  },
});

and i've created a file called test.scss in `./src/styles

this is test.scss file

:root {
  --test: red;
}

imported it in a component.module.scss which is used in Component.astro

this is component.module.scss code

@use "styles/test" as *;

.test {
  background-color: var(--test);
}

but the error i get is

[sass] Can't find stylesheet to import.
  ╷
1 │ @use "styles/test" as *;
  │ ^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\components\Component\component.module.scss 1:1  root stylesheet```

split surge Nov 7, 2022, 7:14 PM

#

sounds like something you setup with tsconfig paths, not in astro config

#

https://www.typescriptlang.org/tsconfig#paths

TSConfig Reference - Docs on every TSConfig option

From allowJs to useDefineForClassFields the TSConfig reference includes information about all of the active compiler flags setting up a TypeScript project.

somber helm Nov 7, 2022, 7:15 PM

#

this my whole tsconfig.json

{
  "extends": "astro/tsconfigs/strict"
}```

#

no idea anymore :/

small aspen Nov 7, 2022, 8:28 PM

#

Hey @somber helm, I believe @split surge was suggesting you to edit your TSConfig to add paths aliases from there, and remove the ones from your astro config

somber helm Nov 7, 2022, 8:52 PM

#

any idea how my tsconfig should look like then?

#

im going through the tsconfigg docs but i just dont see how this is the tsconfig.json's job

#

and not astro.config's

small aspen Nov 7, 2022, 8:58 PM

#

Something like this

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

somber helm Nov 7, 2022, 8:59 PM

#

nop, still same issue

small aspen Nov 7, 2022, 9:00 PM

#

Did you remove what was added in the astro config ?

somber helm Nov 7, 2022, 9:01 PM

#

yea

#

i just dont see how this is tsconfig.json's job

#

this doesnt work ```css
@use "styles/test" as *;

.test {
background-color: var(--test);
}

#

this works```css
@use "../../styles/test" as *;
.test {
background-color: var(--test);
}

#

this path should be resolved inside this config

export default defineConfig({
  site: "project name...",
  resolve: {
    alias: [
      {
        find: "styles",
        replacement: path.resolve(__dirname, "./src/styles"),
      },
    ],
  },
});```

small aspen Nov 7, 2022, 9:10 PM

#

somber helm i just dont see how this is tsconfig.json's job

Oh you're right, tsconfig paths work solely for TS

#

Just found that resolve is actually a vite config option, try setting the config under the vite property

export default defineConfig({
    site: "project name...",
    vite: {
        resolve: {
            alias: [
                {
                    find: 'styles',
                    replacement: path.resolve(__dirname, './src/styles'),
                },
            ],
        },
    },
});

somber helm Nov 7, 2022, 9:17 PM

#

yep, thats it

#astro config - how to add aliases for scss files?