Understanding Dart Sass @use, error

support
1

Not sure why the following is throwing an error:

{{ with resources.Get "scss/bradbice.scss" }}
{{ $opts := dict "transpiler" "dartsass" "targetPath" "css/bradbice.css" }}
{{ with . | toCSS $opts }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}
{{ end }}

And I’m getting

ERROR TOCSS-DART: failed to transform "/scss/bradbice.scss" (text/x-scss): "<stream>:1:1": Can't find stylesheet to import.
Total in 858 ms
Error: error building site: TOCSS-DART: failed to transform "/scss/bradbice.scss" (text/x-scss): "<stream>:1:1": Can't find stylesheet to import.

Folder structure is

/assets/scss/bradbice.scss

And that file has a bunch of @use statements (relevant because this problem didn’t occur until I started switching to using @use)

@use "reset";
@use "tokens";
@use "mixins";
@use "fonts";

My hugo env returns this:

hugo v0.139.3+extended+withdeploy darwin/arm64 BuildDate=2024-11-29T15:36:56Z VendorInfo=brew
GOOS="darwin"
GOARCH="arm64"
GOVERSION="go1.23.3"
github.com/sass/libsass="3.6.6"
github.com/webmproject/libwebp="v1.3.2"
github.com/sass/dart-sass/protocol="3.1.0"
github.com/sass/dart-sass/compiler="1.81.0"
github.com/sass/dart-sass/implementation="1.81.0"

Not sure if this has to do with Hugo modules which I had previously played with but am not using (I deleted my go.mod file).

2

The @use rule loads mixins, functions, and variables from other Sass stylesheets.

This error message is pretty clear: the stylesheets given as argument to @use are missing. Create (and fill) these files, any the error will go away:

$ touch assets/scss/_reset.scss
$ touch assets/scss/_tokens.scss
$ touch assets/scss/_mixins.scss
$ touch assets/scss/_fonts.scss

Does this solve your issue?

1 Like
3

Path should be relative to the project directory, not absolute.

touch assets/scss/_reset.scss
touch assets/scss/_tokens.scss
touch assets/scss/_mixins.scss
touch assets/scss/_fonts.scss
4

Those files all currently exist in assets/scss, that’s why I’m confused why there is an error.

5

Your code with the files in the locations you describe works fine for me. Maybe do tree assets and paste the result here.

6 
assets
├── code-examples
│   ├── auto-size
│   │   ├── auto-size.html
│   │   └── auto-size.scss
│   └── test
│       ├── test.html
│       └── test.scss
├── css
│   └── syntax.css
├── data
│   ├── games.json
│   ├── movies.json
│   └── tv.json
└── scss
    ├── _base.scss
    ├── _blog-ratings.scss
    ├── _blog.scss
    ├── _chroma.scss
    ├── _content.scss
    ├── _dialog-polyfill.scss
    ├── _fonts.scss
    ├── _home-blog.scss
    ├── _home-work.scss
    ├── _home.scss
    ├── _layout.scss
    ├── _library.scss
    ├── _mixins.scss
    ├── _print.scss
    ├── _ratings-list.scss
    ├── _ratings-single.scss
    ├── _ratings-top.scss
    ├── _reset.scss
    ├── _shortcodes.scss
    ├── _text-list.scss
    ├── _tokens.scss
    ├── _twitter-archive.scss
    ├── _work.scss
    ├── bradbice.scss
    ├── holidays.scss
    └── patterns
        ├── article__content
        │   └── _article__content.scss
        ├── article__footer
        │   └── _article__footer.scss
        ├── article__header
        │   ├── _article__header.scss
        │   └── article__header.html
        ├── article__meta
        │   ├── _article__meta.html
        │   └── _article__meta.scss
        ├── article__stub
        │   ├── _article__stub.scss
        │   ├── article__stub--blog.html
        │   └── article__stub--work.html
        ├── article__tags
        │   ├── _article__tags.scss
        │   └── article__tags.html
        ├── aside-section
        │   ├── _aside-section.html
        │   └── _aside-section.scss
        ├── badge
        │   └── _badge.scss
        ├── blockquote
        │   ├── _blockquote.html
        │   └── _blockquote.scss
        ├── breadcrumbs
        │   └── _breadcrumbs.scss
        ├── button
        │   ├── _button.html
        │   └── _button.scss
        ├── dialog
        │   └── _dialog.scss
        ├── field
        │   └── _field.scss
        ├── field-group
        │   └── _field-group.scss
        ├── figure
        │   ├── _figure.scss
        │   └── figure.html
        ├── figure__caption
        │   ├── _figure__caption.scss
        │   └── figure__caption.html
        ├── form
        │   └── _form.scss
        ├── global-footer
        │   ├── _global-footer.scss
        │   └── footer.html
        ├── global-header
        │   ├── _global-header.scss
        │   ├── global-header--blog.html
        │   └── global-header.html
        ├── global-menu
        │   ├── _global-menu.scss
        │   └── global-menu.html
        ├── headings
        │   ├── _headings.scss
        │   └── headings.html
        ├── input
        │   └── _input.scss
        ├── intro
        │   ├── _intro.scss
        │   └── intro.html
        ├── label
        │   └── _label.scss
        ├── lists
        │   ├── _lists.html
        │   └── _lists.scss
        ├── micro__stub
        │   ├── _micro__stub.scss
        │   ├── article__stub--blog.html
        │   └── article__stub--work.html
        ├── page-container
        │   ├── _page-container.scss
        │   └── page-container.html
        ├── pagination
        │   ├── _pagination.scss
        │   └── pagination.html
        ├── picture
        │   └── _picture.scss
        ├── plain-text
        │   ├── _plain-text.scss
        │   └── plain-text.html
        ├── section
        │   ├── _section.scss
        │   ├── section--full.html
        │   └── section.html
        ├── switch
        │   └── _switch.scss
        └── tags-list
            └── _tags-list.scss
7

Your example shows only four. How do you know that it’s one of those four?

1 Like
8

Turns out I had a @forward "scss/bradbice"; in _tokens.scss which was causing the error.

Thanks for helping me iron out my Sass bugs.

9

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.