KPC
Kevin Powell - Community•2y ago
ChrisPTaco

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
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
ChrisPTaco
ChrisPTacoOP•2y ago
I ran "npm install -D sass" if thats what you mean
vince
vince•2y ago
Yea it is. Did you try @use "variables/colors"?
Tenkes
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'.

Did you find this page helpful?