From 87f61afeb3cff330baea069ceceafeb5f52a893f Mon Sep 17 00:00:00 2001
From: Jon Uhlmann <me@jonnitto.ch>
Date: Wed, 18 Aug 2021 16:36:50 +0200
Subject: [PATCH] New: Add tilde importer for sass

---
 Lib/sass.mjs |  2 ++
 Readme.md    | 12 ++++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/Lib/sass.mjs b/Lib/sass.mjs
index d5ff369..4a06618 100644
--- a/Lib/sass.mjs
+++ b/Lib/sass.mjs
@@ -1,4 +1,5 @@
 import sass from "sass";
+import tildeImporter from "node-sass-tilde-importer";
 import { styleFiles, compression } from "./helper.mjs";
 function render(key) {
     const { to, sourcemap } = styleFiles[key];
@@ -6,6 +7,7 @@ function render(key) {
         file: key,
         outFile: to[0],
         outputStyle: compression ? "compressed" : "expanded",
+        importer: tildeImporter,
         sourceMap: sourcemap,
         sourceMapContents: true,
         sourceMapEmbed: true,
diff --git a/Readme.md b/Readme.md
index 3c5b6d4..9dd0195 100644
--- a/Readme.md
+++ b/Readme.md
@@ -220,10 +220,17 @@ Thanks to a custom made `resolve` function, you can also use [globbing][glob] in
 
 ### Sass
 
-If you want to use [Sass] (`.scss`or `.sass` files) you have to install [`sass`]:
+If you want to use [Sass] (`.scss`or `.sass` files) you have to install [`sass`] and [`node-sass-tilde-importer`]:
 
 ```bash
-yarn add --dev sass
+yarn add --dev sass node-sass-tilde-importer
+```
+
+You have to ways to import files from `node_modules` (Example with bootstrap):
+
+```css
+@import "node_modules/bootstrap/scss/bootstrap";
+@import "~bootstrap/scss/bootstrap";
 ```
 
 ### PostCSS
@@ -497,6 +504,7 @@ not dead
 [tailwind file-size]: https://tailwindcss.com/docs/controlling-file-size
 [sass]: https://sass-lang.com
 [`sass`]: https://www.npmjs.com/package/sass
+[`node-sass-tilde-importer`]: https://www.npmjs.com/package/node-sass-tilde-importer
 [postcss-import]: https://www.npmjs.com/package/postcss-import
 [postcss-focus-visible]: https://www.npmjs.com/package/postcss-focus-visible
 [postcss-nested]: https://www.npmjs.com/package/postcss-nested