diff --git a/_includes/base.njk b/_includes/base.njk
index 6a14ca0..bfabbb1 100644
--- a/_includes/base.njk
+++ b/_includes/base.njk
@@ -4,6 +4,7 @@
{% if title %} {{ title }} | {{ meta.sitename }} {% else %} {{ meta.sitename }} {% endif %}
+
{{ content | safe }}
diff --git a/_includes/general.scss b/_includes/general.scss
new file mode 100644
index 0000000..2591576
--- /dev/null
+++ b/_includes/general.scss
@@ -0,0 +1,4 @@
+body {
+ background-color: bisque;
+ color: blueviolet;
+}
\ No newline at end of file
diff --git a/css/general_styles.scss b/css/general_styles.scss
new file mode 100644
index 0000000..ec42bf1
--- /dev/null
+++ b/css/general_styles.scss
@@ -0,0 +1 @@
+@use "general";
diff --git a/eleventy.config.js b/eleventy.config.js
index 42312d2..e742312 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -1,22 +1,8 @@
-const sass = require("sass");
+const eleventySass = require("eleventy-sass");
module.exports = function (eleventyConfig) {
- eleventyConfig.addTemplateFormats("scss");
+ eleventyConfig.addPlugin(eleventySass);
- // Creates the extension for use
- eleventyConfig.addExtension("scss", {
- outputFileExtension: "css", // optional, default: "html"
-
- // `compile` is called once per .scss file in the input directory
- compile: async function (inputContent) {
- let result = sass.compileString(inputContent);
-
- // This is the render function, `data` is the full data cascade
- return async (data) => {
- return result.css;
- };
- },
- });
return {
markdownTemplateEngine: "njk",
htmlTemplateEngine: "njk"
diff --git a/package-lock.json b/package-lock.json
index 2133269..c0d684c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
"license": "WTFPL",
"dependencies": {
"@11ty/eleventy": "^3.0.0",
+ "eleventy-sass": "^3.0.0-beta.0",
"sass": "^1.86.0"
}
},
@@ -1095,6 +1096,34 @@
"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
"license": "MIT"
},
+ "node_modules/eleventy-sass": {
+ "version": "3.0.0-beta.0",
+ "resolved": "https://registry.npmjs.org/eleventy-sass/-/eleventy-sass-3.0.0-beta.0.tgz",
+ "integrity": "sha512-pO+CLz3M/MgOkZ4L7zp0pCY7cxXvX23yTZBEp8vcgIr2Z8xiSfeZqhHMiz53GazJay0A8AUnhBbEfuGMI1RLXA==",
+ "license": "MIT",
+ "dependencies": {
+ "debug": "^4.3.3",
+ "kleur": "^4.1.4",
+ "sass": "^1.49.7",
+ "upath": "^2.0.1"
+ },
+ "engines": {
+ "node": ">=22.0.0"
+ },
+ "peerDependencies": {
+ "@11ty/eleventy": "^3.0.0-beta.1",
+ "eleventy-plugin-clean": "^1.1.0",
+ "eleventy-plugin-rev": "^2.0.0"
+ },
+ "peerDependenciesMeta": {
+ "eleventy-plugin-clean": {
+ "optional": true
+ },
+ "eleventy-plugin-rev": {
+ "optional": true
+ }
+ }
+ },
"node_modules/emoji-regex": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -2461,6 +2490,16 @@
"node": ">= 0.8"
}
},
+ "node_modules/upath": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
+ "integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=4",
+ "yarn": "*"
+ }
+ },
"node_modules/urlpattern-polyfill": {
"version": "10.0.0",
"resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.0.0.tgz",
diff --git a/package.json b/package.json
index 589384b..56e8db5 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
"description": "my website!!",
"main": "index.js",
"scripts": {
- "watch:eleventy": "npx @11ty/eleventy --watch",
+ "watch:eleventy": "npx --node-options=\"--experimental-require-module\" @11ty/eleventy --watch",
"watch:sass": "npx sass sass:_site/css --watch",
"start": "npm run watch:eleventy"
},
@@ -14,6 +14,7 @@
"type": "commonjs",
"dependencies": {
"@11ty/eleventy": "^3.0.0",
+ "eleventy-sass": "^3.0.0-beta.0",
"sass": "^1.86.0"
}
}