How do I import a file when I use the compileString() method from Dart Sass?

Question

I was really trying to understand Sass documentation but it does not provide good examples, so I need some help, please. As Dart Sass allows now to execute some functions on browser, and that is what I am doing, I need to use compileString() instead of compile().

This is my code:

const sass = require('sass');

const result = sass.compileString(`h1 {
  font-size: 40px;
  code {
    font-face: Roboto Mono;
  }
}

@charset "utf-8";
@import "../node_modules/bulma/bulma.sass";`);

console.log(result.css);

The thing is: I want to import this directory ../node_modules/bulma/bulma.sass, but everytime I try to execute that function, this is the exception:

VM1130:3 Uncaught Error: Custom importers are required to load stylesheets when compiling in the browser.
  ╷
9 │ @import "../node_modules/bulma/bulma.sass";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  - 9:9  root stylesheet
    at Object.wrapException (sass.dart.js:1271:17)
    at Object.throwWithTrace0 (sass.dart.js:24247:15)
    at _EvaluateVisitor1._evaluate0$_loadStylesheet$4$baseUrl$forImport (sass.dart.js:84318:13)
    at _EvaluateVisitor1._evaluate0$_loadStylesheet$3$forImport (sass.dart.js:84328:19)
    at _EvaluateVisitor__visitDynamicImport_closure1.call$0 (sass.dart.js:86124:21)
    at _EvaluateVisitor1._evaluate0$_withStackFrame$1$3 (sass.dart.js:85355:25)
    at _EvaluateVisitor1._evaluate0$_withStackFrame$3 (sass.dart.js:85361:19)
    at _EvaluateVisitor1._evaluate0$_visitDynamicImport$1 (sass.dart.js:84260:19)
    at _EvaluateVisitor1.visitImportRule$1 (sass.dart.js:84234:17)
    at ImportRule0.accept$1$1 (sass.dart.js:89383:22)

Sass documentation says I can add an importer as a parameter on compileString(), but I did not understand how it works. Please, I just need and example of how can I import a file. Thanks!

score 0 · Answer 1 · answered Aug 07 '23 at 08:15

Here is an example I worked out in JSFiddle by just going one step at a time, following the errors I got. Maybe not a fully complete solution, but hopefully it's enough that you can modify as needed from here for your purposes.

<script type="module">
  import * as sass from 'https://jspm.dev/sass';
  
  const myImporter = {
    load: async (url, options) => {
      if (url.href === 'https://yourdomain.com/modified-path-to-bulma') {
        const response = await fetch('https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css');        
        const text = await response.text();
        
        return {
          contents: text,
          syntax: 'css'
        }
      }
      return null;
    },
    canonicalize: (str, options) => {
        if (str.indexOf('node_modules/bulma') > -1) {
        return new URL('../modified-path-to-bulma', 'https://yourdomain.com');
      }
      return null;
    }
  };
  
  const compile = () => sass.compileStringAsync(
    `h1 {
      font-size: 40px;
      code {
        font-face: Roboto Mono;
      }
    }

    @charset "utf-8";
    @import "../node_modules/bulma/bulma.sass";`, {
      importers: [myImporter]
    });

  console.log(await compile());
</script>

How do I import a file when I use the compileString() method from Dart Sass?

1 Answers1