43 lines
1.0 KiB
Markdown
43 lines
1.0 KiB
Markdown
|
+++
|
||
|
|
author = "Hugo Authors"
|
||
|
|
title = "Advanced Style"
|
||
|
|
date = "2024-04-09"
|
||
|
|
description = "Guide to advanced usage of Anubis2"
|
||
|
|
tags = [
|
||
|
|
"emoji",
|
||
|
|
]
|
||
|
|
+++
|
||
|
|
|
||
|
|
<div class="anubis-custom-style">
|
||
|
|
The custom <code>.css</code> <code>.scss</code> <code>.sass</code> file should be placed in <code>assets/</code> folder. (instead of <code>static/</code>)
|
||
|
|
</div>
|
||
|
|
|
||
|
|
This page is affected by `assets/css/custom1.scss` and `assets/css/custom2.css`
|
||
|
|
|
||
|
|
## How to use PoseCSS
|
||
|
|
|
||
|
|
First, make sure your Hugo version supports Hugo Pipes. Hugo Pipes is available in Hugo `0.46` and later versions.
|
||
|
|
|
||
|
|
Then, add the following content to your Hugo configuration file (such as config.toml) to enable PostCSS:
|
||
|
|
|
||
|
|
```toml
|
||
|
|
[build]
|
||
|
|
writeStats = true
|
||
|
|
|
||
|
|
[params]
|
||
|
|
usePostCSS = true
|
||
|
|
```
|
||
|
|
|
||
|
|
In addition, you need to create a postcss.config.js file in the root directory of your project, with the following content:
|
||
|
|
|
||
|
|
```js
|
||
|
|
module.exports = {
|
||
|
|
plugins: [
|
||
|
|
require('postcss-import')(),
|
||
|
|
require('postcss-url')(),
|
||
|
|
require('autoprefixer')(),
|
||
|
|
// Add more PostCSS plugins here if needed
|
||
|
|
]
|
||
|
|
};
|
||
|
|
```
|