Sass not finding correct filepaths - css

Question

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?

Answer 1

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'.