Как настроить SCSS с Hugo
Я новичок в Hugo и немного борюсь с документацией, поскольку она довольно фрагментирована с неполными примерами.
Я создал новый сайт hugo new site site-name вместе с новой темой hugo new theme theme-name.
На странице документации для SASS / SCSS есть следующий пример:
{{ $sass := resources.Get "sass/main.scss" }}
{{ $style := $sass | resources.ToCSS }}
Не уверен, куда это должно идти, как работает весь конвейер. Кроме того, похоже, что это специально ищет файлы в папке assets, даже если тема создана в папке static/css. Большинство примеров, которые я нахожу в Интернете, - это все старые настройки с использованием gulp для компиляции до добавления поддержки в hugo (насколько я понимаю)
Ответы 2
Вы можете использовать расширенную версию hugo (например, https://github.com/gohugoio/hugo/releases/download/v0.53/hugo_extended_0.53_Windows-64bit.zip), которая автоматически компилирует SCSS в CSS. Затем вы можете настроить все настройки. Если вы не хотите / не используете расширенную версию, тогда, конечно, вам придется пойти по старой школе с такими наблюдателями, как ruby SASS или Gulp и т. д.
Также см .: https://gohugo.io/news/0.43-relnotes/, см. Примечания. «Hugo теперь выпущен с двумя бинарными версиями: одна с поддержкой SCSS / SASS и одна без нее. На момент написания это доступно только в бинарных файлах на странице выпуска GitHub. Будут выпущены сборки Brew, Snap и т. д. Но обратите внимание что вам нужна только расширенная версия, если вы хотите редактировать SCSS. Для вашего CI-сервера или если вы не используете SCSS, вам, скорее всего, понадобится нерасширенная версия ».
Я лично пользуюсь расширенной версией; это тоже с Gitlab CI без каких-либо проблем. Я всегда пишу / редактирую SCSS; запустите hugo, и он сделает все остальное. Вы также должны убедиться, что ваша тема поддерживает / хорошо с ней взаимодействует. Тема, которую я использую (поддерживает SCSS): https://github.com/luizdepra/hugo-coder/
@LostBalloon Да. По умолчанию. И тема настроенного конвейера тоже. Но да, обычно под assets/.
Быстрый вопрос, я предполагаю, что когда targetPath в используемой вами теме установлен, например, на 'css/file.css, это когда он скомпилирован и попадает в /public/css/file.css?
@LostBalloon Правильно. Также, если нужно, есть PostCSS: gohugo.io/hugo-pipes/postcss.
Большое спасибо за вашу помощь, теперь у меня наконец-то работает прототип!
@LostBalloon Добро пожаловать. Удачи и наслаждайтесь.
Похоже, что расширенная сборка теперь может быть доступна через некоторые менеджеры пакетов. Мне удалось запустить choco install hugo-extended, чтобы SCSS работал в Windows.
Not sure where that's supposed to go, how the whole pipeline works
Этот код должен находиться внутри HTML, особенно там, где вы обычно добавляете CSS. Переменная $styles в коде будет содержать расположение обработанного файла CSS вместе с другими деталями, если таковые имеются.
Вот шаги по настройке конвейера SCSS в Hugo,
- Создайте свой scss где-нибудь в каталоге ресурсов. Каталог ресурсов по умолчанию -
/assets. Пример: /assets/sass/main.scss - Перейдите в базовый HTML-макет или в любой другой частичный раздел, в который вы обычно импортируете файлы CSS, и добавьте туда код в документацию по конвейеру. URL-адрес рядом с
resources.Getотносится к каталогу ресурсов, определенному в вашем файле конфигурации. В моем случае это выглядит следующим образом:
{{ $sass := resources.Get "sass/main.scss" }}
{{ $style := $sass | resources.ToCSS | resources.Fingerprint }}
<link rel = "stylesheet" href = "{{ $styles.Permalink }}" integrity = "{{ $styles.Data.Integrity }}">
Это немного устарело, но очень помогло. Вам больше не нужно определять assetDir, и в документации есть пример. Но это помогло получить информацию, которую вы просто используете в html напрямую. Думал, что вам нужно сделать это в какой-то системе сборки. gohugo.io/hugo-pipes/introduction
@Citrullin Рад, что вам помогли. Обновлен ответ, зарегистрируйте каталог активов по умолчанию. Спасибо, что указали на это.
Хорошо, я понял, спасибо, я действительно работаю на v0.53 (установлен с помощью homebrew). Я предполагаю, что теперь он включает поддержку, поскольку компилятор, похоже, поддерживает эти функции. Примечания к выпуску и тема помогли мне понять, чего мне не хватало. Я предполагаю, что файлы всегда должны находиться в папке
assets.