Skip to content

How to use Cirrus SCSS version without Node #302

Description

@m-2k

Note: I try use Cirrus (and scss) for the first time.

I read docs: yes.
Tech stack: hugo, dartsass
Problem: I don't understand how to use the package without using a node.js software.

I remove all sass-true JS dependency from src/_internal/ but I still couldn't use directives @use and @import to load any cirrus/src/* into my scss file, except src/base/ because it (src/base/) has a file _index.scss... Oh my god.

Asset changed /sass/style.scss
ERROR Rebuild failed: TOCSS-DART: failed to transform "/sass/style.scss" (text/x-scss): "<stream>:1:1": Can't find stylesheet to import.

Finally, now I use build .css version renamed into .scss and with this style coding:

@use "./cirrus-all";

.cusom-class-1{
  @extend .text-success;
}

But how can I use SCSS sources of Cirrus in the future?

Hugo config for transpile scss:

<!-- ./themes/base/layouts/partials/head/css.html-->
{{ $opts := dict "transpiler" "dartsass" "targetPath" "css/style.css" }}
{{ with resources.Get "sass/style.scss" | toCSS $opts | minify | fingerprint }}
  <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}
❯ hugo env                                                   
hugo v0.131.0+extended darwin/arm64 BuildDate=2024-08-02T09:03:48Z VendorInfo=brew
GOOS="darwin"
GOARCH="arm64"
GOVERSION="go1.22.5"
github.com/sass/libsass="3.6.5"
github.com/webmproject/libwebp="v1.3.2"
github.com/sass/dart-sass/protocol="2.7.1"
github.com/sass/dart-sass/compiler="1.77.8"
github.com/sass/dart-sass/implementation="1.77.8"

Thx.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions