add: feature of sass
This commit is contained in:
parent
d57d8a7958
commit
d979f023f4
7 changed files with 96 additions and 45 deletions
42
exampleSiteMultilingual/content/posts/advanced-style.md
Normal file
42
exampleSiteMultilingual/content/posts/advanced-style.md
Normal file
|
@ -0,0 +1,42 @@
|
|||
+++
|
||||
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
|
||||
]
|
||||
};
|
||||
```
|
Loading…
Add table
Add a link
Reference in a new issue