asked on
I'm trying to convert scss files to the modular syntax -@use and @forward. I'm working with the following striped-down file structure:
_scss
base
_theme.scss
_index.scss
helpers
_colors.scss
main.scss
This is what I have now.
// base/_theme.scss
$brand-gold: hsla(32, 47%, 46%, 100%);
// base/_index.scss
@forward 'theme';
// helpers/colors.scss
@use 'base';
button {
color: $brand-gold;
}
// helpers/_index.scss
@forward 'colors';
// main.scss
@use 'base';
@use 'helpers';
This generates the following error message:
Dart Sass failed with this error: Can't find stylesheet to import.
╷
8 │ @use 'helpers' as *;
│ ^^^^^^^^^^^^^^^^^^^
╵
helpers/_colors.scss 8:1 @forward
helpers/_index.scss 7:1 @use
main.scss 3:1 root stylesheet
It just seems like it should work. I tried relative path notation also, with the same result. Maybe I don't understand how the @use & @foreward flow works. Can anybody glue me in? I'm using codekit 3 with dart Sass compiler.