Deploying to github pages using github actions + dart sass - Cannot open file error

[ivanbacher]

Hi, I am trying to create a github action to deploy my hugo site on githib pages. I keep getting the error described below. Maybe someone has encountered this.

This is my gh-pages.yml file

name: github pages

on:
  push:
    branches:
      - live  # Set a branch that will trigger a deployment

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Install Dart Sass Embedded # Installs dart-sass
        run: sudo snap install dart-sass-embedded
      
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true

      - name: NPM Install # runs npm install to get dependancies
        run: npm ci

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        if: github.ref == 'refs/heads/main'
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

The script fails on the build step:

Start building sites … 
hugo v0.108.0-a0d64a46e36dd2f503bfd5ba1a5807b900df231d+extended linux/amd64 BuildDate=2022-12-06T13:37:56Z VendorInfo=gohugoio
Error: Error building site: TOCSS-DART: failed to transform "scss/main.scss" (text/x-scss): "/home/runner/work/website/website/assets/scss/third-party/bootstrap.scss:2:8": Cannot open file
Total in 679 ms
Error: Process completed with exit code 255.

The main error being Cannot open file. Not sure if this is a permissions error or a dart sass error, or something else.

main.scss

...
@import "./third-party/bootstrap.scss";
@import "./third-party/hamburgers.scss";
...

third-party/bootstrap.scss

@import "../node_modules/bootstrap/scss/functions";
...

[bwintx]

I have no idea about using Snap with GitHub Actions, but here’s the step in my Hugo repo’s GHA that gets Embedded Dart Sass (after having supplied the version, earlier in the GHA, through the environment variable DART_SASS_VERSION):

      - name: Unpack Embedded Dart Sass v${{ env.DART_SASS_VERSION }}
        run: |
          tar -xvf sass_embedded-${{ env.DART_SASS_VERSION }}-linux-x64.tar.gz
          sass_embedded/dart-sass-embedded --version

. . . and it’s never failed me.

Also: in Dart Sass, you don’t want to use @import, which was part of the now-deprecated Libsass. Instead, you should use @use, as explained in this Medium article.

Finally, I am assuming (since you didn’t say otherwise) that you have correctly set the transpiler to use Dart Sass, as briefly described in the documentation. For example, my head for each page on my Hugo repo has:

{{- $optionsCSS := (dict "transpiler" "dartsass" "targetPath" "css/index.css") -}}

. . . for use with something like the following:

{{- $css = resources.Get "scss/index.scss" | resources.ToCSS $optionsCSS -}}
<link rel="stylesheet" href="{{ $css.RelPermalink }}" type="text/css">

[jmooring]

This is a bug, specific to the dart-sass-embedded Snap package, probably related to the snap’s strict confinement. It’s on my list…

In the interim, see the alternate approach here:
https://discourse.gohugo.io/t/using-the-dart-sass-transpiler/41878#github-pages-4

[jmooring]

This has been fixed.

The underlying problem was lack of access to $HOME, due to:

1. An incorrect assumption on my part, and more importantly…
2. Inadequate testing (@use and @import rules outside of the pwd without mounting to assets)

I apologize for the inconvenience.

@ ivanbacher I would greatly appreciate it if you could test by reverting your workflow to use sudo snap install dart-sass-embedded. No other changes are required. Please post your findings.

[ivanbacher]

Thanks for the reply and sharing your Hugo repo’s github action. Interesting to read through the file. Regarding the @use vs @import for sass, unfortunately bootstrap does not support @use out of the box yet.

[ivanbacher]

Yuhuu, builds with no errors now. Thank you for fixing this and for your other post. Really helpful.

[jmooring]

Thank you confirming the fix!