独学者Fossa

独学していることなど

Hugo includepaths

Hugo
Hugo

Hugoで、scssを使う時、node_modulesにあるファイルを@importで指定したい場合があります。

includepathsについて、理解がなかった頃、themes/<theme名>配下に、node_modulesを作成していました。

テーマ毎に、使用するCSS Frameworkが違うからです。

.
├── LICENSE
├── archetypes
├── assets
├── layouts
├── node_modules
├── package-lock.json
├── package.json
├── static
└── theme.toml

しかし、includepathsを使うのなら、Hugo site newで作成したフォルダのルートにnode_modulesを作成すればいいのです。

.
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── node_modules
├── package-lock.json
├── package.json
├── public
├── resources
├── static
└── themes

layouts/partial/head.html

  {{ $options := (dict "targetPath" "assets/css/style.css" "outputStyle" "compressed" "enableSourceMap" true "includePaths" (slice "node_modules")) }}
  {{ $style := resources.Get "scss/style.scss" | resources.ToCSS $options }}
  <link rel="stylesheet" href="{{ $style.RelPermalink }}">

themes/<theme名>/assets/scss/style.scss

@import "uikit/src/scss/variables-theme.scss";
@import "uikit/src/scss/mixins-theme.scss";

node_modules/uikit/src/scss/variables-theme.scssを読んでくれるようになります。

再考(追記:2021-03-07)

fossa-hobby.hatenablog.com

後日、再考しています。