CODEWITHSUNDEEP
csssass
DeepQuantum
DeepQuantum

Reputation: 241

Sass not finding correct filepaths

I want to use sass to write individual components, for example styling a chart. But I don't want to manually include every component, but rather have one scss file that includes all the components and then gets compiled to one .css file that I can include. I found this SO answer but it didn't work for me and according to SASS, you're not supposed to use @import anymore. This is the project structure:

src/
├─ about/
│  ├─ .../
│  ├─ scss/
│  │  ├─ chart.scss/
├─ app/
│  ├─ scss/
├─ build/
│  ├─ css/
|  |  ├─ styles.css
├─ base/
│  ├─ styles.scss

styles.scss should include all scss files from all projects in the src, and should be compiled on every .scss save. When I do it with this command though:

sass base/styles.scss:build/css/main.css --watch --style=compressed --no-source-map

it gives the error:

Error: Can't find stylesheet to import.
  ╷
1 │ @use "//about/scss/chart.scss";
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  base_templates\styles.scss 1:1  root stylesheet

The content of styles.scss is

@use "//about/scss/chart.scss";

and that of chart.scss:

h1 {
    color: #fff;
}

(as a test). What am I doing wrong?

Upvotes: 0

Views: 1054

Answers (1)

David
David

Reputation: 6084

The path should be "/src/about/scss/chart.scss" for Sass if src is the source of the volume respectively partition. Sass never 'knows' anything about your domain or network, therefore you can't assume that you can use paths based on the webroot as absolute paths.

You can also consider using relative paths, then it would be '../about/scss/chart.scss'.

Upvotes: 1

Related Questions