I'm currently working on a website using this amazing template, but I'm struggling to import a Google Font. In my SCSS file (styles.css), I've added the following:
@import 'https://fonts.googleapis.com/css2?family=Nunito&display=swap';My PostCSS script is as follows:
const fs = require('fs');
const path = require('path');
const postcss = require('postcss');
// defining the entry point and output filename for postcss compilation
const fileName = "styles.css";
module.exports = class {
async data () {
const rawFilepath = path.join(__dirname, `../_includes/postcss/${fileName}`);
return {
permalink: `css/${fileName}`,
rawFilepath,
rawCss: await fs.readFileSync(rawFilepath)
};
};
async render ({ rawCss, rawFilepath }) {
return await postcss([
// require('postcss-comment'),
require('precss'),
require('postcss-import'),
require('postcss-mixins'),
require('postcss-color-mix'),
require('cssnano'),
])
.process(rawCss, { from: rawFilepath })
.then(result => result.css);
};
}
Despite this setup, the resulting styles.css file doesn't include the desired font import. I've experimented with:
But unfortunately, none of them have resolved the issue. Do you have any suggestions or ideas that could help me solve this problem?