Kevin Powell - Community•2y ago

Sass @use won't import partial

I'm working on a project with vite. I'm trying to import a partial, but for some reason I keep getting an error saying can't find stylesheet to import File structure:

/src
  /css
    /components
      _Nav.scss
    /variables
      _colors.scss
    App.scss

/src
  /css
    /components
      _Nav.scss
    /variables
      _colors.scss
    App.scss

App.scss

@use 'variables';
@use 'components';

@use 'variables';
@use 'components';

Error Message

[plugin:vite:css] [sass] Can't find stylesheet to import.
  ╷
1 │ @import 'variables';
  │         ^^^^^^^^^^^
  ╵
  src\css\App.scss 1:9  root stylesheet

[plugin:vite:css] [sass] Can't find stylesheet to import.
  ╷
1 │ @import 'variables';
  │         ^^^^^^^^^^^
  ╵
  src\css\App.scss 1:9  root stylesheet

4 Replies

vince•2y ago

Do you have sass installed as one of your dependencies? I don't think it's added by default in Vite like it is in CRA

ChrisPTacoOP•2y ago

I ran "npm install -D sass" if thats what you mean

vince•2y ago

Yea it is. Did you try @use "variables/colors"?

Tenkes•2y ago

you need to add _index.scss file in each of your directories, and inside of it you're going to @forward all files that directory contains. So your folder structure should look something like this:

/src
  /css
    /components
      _Nav.scss
      _index.scss
    /variables
      _colors.scss
      _index.scss
    App.scss

/src
  /css
    /components
      _Nav.scss
      _index.scss
    /variables
      _colors.scss
      _index.scss
    App.scss

Ans then, _index.scss inside of your 'variables' should look something like this:

@forward 'colors';

@forward 'colors';

Same goes for 'components'.

Gaming

Programming

Sass @use won't import partial