posts/2022/03/using-dart-sass-hugo/

[giscus[bot]]

posts/2022/03/using-dart-sass-hugo/

Until hosts allow Embedded Dart Sass in their build processes, here’s a not-too-hacky workaround for Sass-on-Hugo fans.

https://www.brycewray.com/posts/2022/03/using-dart-sass-hugo/

[davidsneighbour]

Do you know of any way how to determine which SASS version one uses? I was having this post in my backlog and now when I tried to add Dart SASS and finally be a cool kid I realised, that I might be already using it? I always used the sass package via npm. Also thought that might be the Dart SASS package and wondered why everybody was so agitated about "it" not being available in Hugo.

[brycewray]

Yes, the npm sass package is, indeed, Dart Sass compiled to JavaScript. Thus, if one prefers not to use the method discussed in the next post regarding Embedded Dart Sass, using the sass package will get you the same results, albeit more slowly. The Sass team is synchronizing all the various forms—including both sass and Embedded Dart Sass—at the same version, which at this writing is 1.49.9.

Further: if you have Embedded Dart Sass installed in your system PATH, just use dart-sass-embedded --version and you’ll get an object with the information. (And, of course, the version for sass will appear in a project’s package.json file.)

[darrenaddy]

Thanks for this write-up. I've tried every way of installing Dart Sass in my Hugo project, including yours (which seemed to do what it said on the tin). However, when I run sass --version I still get:
'sass' is not recognized as an internal or external command, operable program or batch file.
How do I tell if I have it correctly installed and functionally available to the project?
Thanks in advance for any replies!

[brycewray]

Depends. As I said above: if you’re talking about the Embedded Dart Sass, the entry is dart-sass-embedded --version; if you’re talking about the npm sass package, you have to look at package.json.

[darrenaddy]

Thanks so much for the reply. I missed your comment about the version number being in package.json. Here is what the end of mine looks like:

"author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^5.1.3",
    "sass-embedded": "^1.50.1"
  },
  "devDependencies": {
    "npm-run-all": "^4.1.5",
    "rimraf": "^3.0.2",
    "sass": "^1.51.0"
  }
}

Does that look correct? Seems I have both sass-embedded and sass.
One (more) thing that is not clear to me is: a lot of SCSS is broken down into parts like:
_variables, _blog, _footer ... etc. (I'm converting an HTML/Bootstrap 5 template that I like to Hugo.) How would one incorporate that into your Dart Sass NPM Way?

Before I started seeing if I could adopt Dart Sass (for local development only - I just want to learn to generate a static site that I can FTP to a traditional web host. I'll learn about Netlify and it's ilk later) I was following this excellent tutorial. So I'm trying to meld his code with yours (when it comes to the CSS processing.)

With the noorix.com method, it appears that you put the _variable.scss in a separate folder like "base". The base directory has a _index.scss that "compiles" all of the contents of base. Then main.css imports index.scss, the node_modules , and the styles.scss (all outputting from the | toCSS $options | minify }} to become a single css/styles.css

Am I "getting warm" here? :)

[darrenaddy]

Using npm run build:hugo the site built with no errors. Yay! But viewing the source of the home page, it show this in the document head:
`'
That file is there (loads) but is not loaded by the page (which appears unstyled).
In any event, it should be css/styles.css so I must have something turned around in my understanding of that code. Will get back to it in the morning!

[darrenaddy]

The missing line in my last comment should show this as the currently built stylesheet tag:
link rel=stylesheet href=./sass/styles.scss media=screen

[brycewray]

It’s late, so I caution that you’re getting this reply from an old brain that’s been going for about 19 hours now 😄 — but I don’t understand the presence of sass-embedded in your package.json. The procedure I described in this post needs only the sass package. If you’re going to use the Embedded Dart Sass mentioned in the next post, that has nothing to do with package.json but, rather, is something that appears in your system PATH; and, again, I recommend Zachary Betz’s explanation on how to make that happen. Once you’ve done that, Hugo will “see” it locally if you follow the procedure described in the next post.

Not sure if that helps, but it’s the best I can offer at the moment.

[darrenaddy]

Good morning! Thanks so much for your (late) reply. Just wanted to clarify the sass-embedded in my package.json. My first attempts were to install/use embedded_dart_sass and I did not think I was doing so successfully as I never got a return value on sass --version or a return value on dart_sass_embedded --version so I did not think I installed it properly (I did add it's folder to the Windows system path Environment Variable). I even tried putting it multiple places/paths.
So do you recommend that I run an UNINSTALL npm command on the dart_sass_embedded?

[brycewray]

You may as well uninstall it; it helps neither an Embedded Dart Sass installation nor a sass installation. As for why Hugo can't see the Embedded Dart Sass installation in your PATH, that's a strange one. I presume you set the transpiler in Hugo as I explained in that other post, in which case it should work. Might be worth asking about in the Hugo Discourse, perhaps using the same thread to which I linked in the other post.

[darrenaddy]

For anyone coming along and finding this after me:
If you encounter the 'NODE_ENV' is not recognized as an internal or external command
error, (when running npm scripts in your package.json) you are probably on Windows.
This should get you going again: https://github.com/laggingreflex/win-node-env