Compiling SCSS files

[apraditya]

I'm not sure if this should be Hugo related question or this specific theme. Does it run automatically when you run hugo? I am not sure.

Here's my problem. I add a scss file in the styles folder and import it in styles/main.scss. However, I don't see that file get build and I couldn't find how to compile scss files with Hugo Pipes on Hugo documentation. I remove all the files in the styles folder it doesn't do anything to the site. Is it related to the resources/_gen folder? How do I regenerate the content?

Thanks

[laozhu]

Hi @apraditya

This theme is using PostCSS for styles build, you should install CLI globally before change styles and build.

Here are some docs, may be useful for you.

• Build Section
• Hugo Pipes with PostCSS

[apraditya]

Hi, @laozhu

Yes I am aware the theme is using PostCSS. Before posting this issue, I have PostCSS installed globally. I have read those Hugo docs. The docs just explain the config and the usage.

However, it doesn't answer my question. How does the CSS get built / generated? Is there a specific command, because hugo CLI doesn't seem to work in my case.

[laozhu]

Hi @apraditya

I don't know why hugo CLI not work for you, but I start a new site with this theme and it works. below is my steps, hope these steps can help you.

$ hugo new site test
$ cd test/themes
$ git clone https://github.com/laozhu/hugo-nuo --depth=1
$ cd hugo-nuo

# Install dependences for PostCSS
$ npm install

$ cd ../..

# For development
$ hugo server
$ tree -L 2
.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── resources
│   └── _gen
├── static
└── themes
    └── hugo-nuo

9 directories, 2 files

--

# For production build
$ hugo
$ tree public -L 2
public
├── 404.html
├── categories
│   ├── index.html
│   └── index.xml
├── images
│   ├── avatar.jpg
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon.ico
│   ├── grey-prism.svg
│   ├── tile-image-windows.png
│   ├── touch-icon-android.png
│   └── touch-icon-apple.png
├── index.html
├── index.xml
├── page
│   └── 1
├── scripts
│   └── index.min.js
├── sitemap.xml
├── styles
│   └── main.min.css
└── tags
    ├── index.html
    └── index.xml

7 directories, 18 files

BTW

• Remove resources/_gen in the hugo-nuo theme and site root folder is OK, it will regenerated with hugo CLI. I add resources/_gen in theme folder because #88
• I use package.json to install some PostCSS plugins locally, and postcss.config.js file is for PostCSS configuration.

[apraditya]

Thanks for the quick response & demo @laozhu. It's definitely something's wrong with my hugo CLI. Here's what I have when running hugo server

$ tree -L 2
.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── resources
├── static
└── themes
    └── hugo-nuo

8 directories, 2 files

So the resource/_gen didn't get created. Also, there are some warnings when running hugo server,

$ hugo server
Building sites … WARN 2018/12/12 06:42:03 Found no layout for "taxonomyTerm", language "en", output format "HTML": create a template below /layouts with one of these filenames: categories/terms.en.html.html, categories/list.en.html.html, categories/terms.html.html, categories/list.html.html, categories/terms.en.html, categories/list.en.html, categories/terms.html, categories/list.html, taxonomy/terms.en.html.html, taxonomy/list.en.html.html, taxonomy/terms.html.html, taxonomy/list.html.html, taxonomy/terms.en.html, taxonomy/list.en.html, taxonomy/terms.html, taxonomy/list.html, _default/terms.en.html.html, _default/list.en.html.html, _default/terms.html.html, _default/list.html.html, _default/terms.en.html, _default/list.en.html, _default/terms.html, _default/list.html
WARN 2018/12/12 06:42:03 Found no layout for "taxonomyTerm", language "en", output format "HTML": create a template below /layouts with one of these filenames: tags/terms.en.html.html, tags/list.en.html.html, tags/terms.html.html, tags/list.html.html, tags/terms.en.html, tags/list.en.html, tags/terms.html, tags/list.html, taxonomy/terms.en.html.html, taxonomy/list.en.html.html, taxonomy/terms.html.html, taxonomy/list.html.html, taxonomy/terms.en.html, taxonomy/list.en.html, taxonomy/terms.html, taxonomy/list.html, _default/terms.en.html.html, _default/list.en.html.html, _default/terms.html.html, _default/list.html.html, _default/terms.en.html, _default/list.en.html, _default/terms.html, _default/list.html
WARN 2018/12/12 06:42:03 Found no layout for "home", language "en", output format "HTML": create a template below /layouts with one of these filenames: index.en.html.html, home.en.html.html, list.en.html.html, index.html.html, home.html.html, list.html.html, index.en.html, home.en.html, list.en.html, index.html, home.html, list.html, _default/index.en.html.html, _default/home.en.html.html, _default/list.en.html.html, _default/index.html.html, _default/home.html.html, _default/list.html.html, _default/index.en.html, _default/home.en.html, _default/list.en.html, _default/index.html, _default/home.html, _default/list.html

However, on my actual site where I'm trying to update this theme, I don't get these warnings but don't get the CSS re-built. May be it's no longer scope to this theme so I'm closing this issue. Appreciate if you could give me some suggestions. I'm using hugo version v0.51 linux/386 BuildDate: 2018-11-07T10:10:13Z

[laozhu]

You are welcome @apraditya

BTW, have you set the theme key to hugo-nuo inconfig.toml file?

[laozhu]

Hi @apraditya, some update of this theme, I have removed PostCSS dependencies, now you don't need to install it and their plugins.