Can't find stylesheet to import

[jkaye31]

Hi all :wave:

Migrating from node-sass and I'm having some issues importing a file. Ignore the hideous file structure.

-root
  -dir1
    -dir2
      -dir3
        -dir4
          -dir5
            -dir6
              * _file_needed.scss
          -file_to_reference_scss

I'm trying to import the scss file from two directories above where it lives. Here's what I've tried

@use 'file_needed.scss'
@use '_file_needed'
@use '_file_needed.scss'
@use 'dir5/dir6/_file_needed.scss'
@use './dir5/dir6/_file_needed.scss'
@use './dir5/dir6/file_needed.scss'

loadPaths: ['root/dir1/dir2/dir3/dir4/dir5/dir6']
@use '_file_needed.scss'

loadPaths: ['dir1/dir2/dir3/dir4/dir5/dir6']
@use '_file_needed.scss'

I continue to get the can't find stylesheet to import error. Assuming I'm misunderstanding how these paths work, any help would be appreciated.

[jathak]

Can you provide a reproduction repo?

[WebMechanic]

in case this is still relevant ...

your ASCII-art is a bit distracting, but if file_to_reference_scss in dir5 needs to include _file_needed.scss from the subdirectory dir6

[...] dir4/dir5/file_to_reference_scss
[...] dir4/dir5/dir6/_file_needed.scss

it should simple be a regular relative pathname:

// dir5/file_to_reference_scss
@use "dir6/file_needed"; 

it's the only option you apparently didn't try...

with @use and @forward leading _ are ignored and the .scss file extension is optional.

hope this helps

[tscott-au]

I am also having no luck with the @use directive on a windows platform. Have copied the example from https://sass-lang.com/guide/#modules to files: sccs/_base.sccs sccs/style.sccs

Using the dart sass V1.66.1, can not find any way to get the _base.sccs loaded as a module.

Here is a sample repo with ReadMe.md detailing the attempt. https://github.com/tscott-au/sass_use_error

[ntkme]

@tscott-au The file name extension should be scss instead of sccs.

[tscott-au]

@ntkme Thank you for pointing out my error with the file extension. I corrected the file extensions to scss and everything worked!

[constantant]

after updating to 1.58.1(Angular update from 14 to 15) it fails to understand root related paths

Can't find stylesheet to import.

     ╷
   1 │ @import "libs/lib-a/src/lib/common/colors";
     │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     ╵

[nex3]

@constantant Can you reproduce this with Sass alone? Are you sure it's not an issue with Angular's configuration?

[constantant]

@constantant Can you reproduce this with Sass alone? Are you sure it's not an issue with Angular's configuration?

Never used it alone, not sure that I can properly make a test. It could be from Angular but if I switch to Less everything works as expected.

[nex3]

We can't really help you unless you show us specifically how the Sass API on its own is behaving incorrectly. Otherwise, I suggest raising the issue with Angular.