Sass `compileString` unable to import stylesheets

Node version: 18.4.0 Sass version: 1.54.0 OS: macOS 12.4 (M1/ARM)

I am unable to use the compileString() method to process CSS that imports other stylesheets via @use or @forward. I have tried absolute paths and numerous relative path variations. No luck. FWIW, the same text contained in a file can be processed using the compile() method and the Sass CLI without issue.

Steps to reproduce:

Create the following three files:

// File: test.scss

@use "test-import";

.my-class {
    color: red;
}

// File: test-import.scss

.my-import {
    color: blue;
}

// File: test.js

const fs = require('fs');
const path = require('path');
const sass = require('sass');

const srcPath = path.resolve(__dirname, 'test.scss');
const srcText = fs.readFileSync(srcPath, 'utf8');

try {
    const result = sass.compile(srcPath);
    console.log('sass.compile() success');
    console.log(result);
}
catch(err) {
    console.error('sass.compile() fail');
    throw(err);
}

try {
    const test2 = sass.compileString(srcText);
    console.log('sass.compileString() success');
    console.log(result);
}
catch(err) {
    console.error('sass.compileString() fail');
    throw(err);
}

Run the test.js file:

node ./test.js

The sass.compile() test will complete successfully and display the results object to the console. The CSS generated is as expected:

.my-import {
  color: blue;
}

.my-class {
  color: red;
}

The sass.compileString() test will fail and display the following in the console:

sass.compileString() fail
/Users/john/Dev/project-name/test.js:27
    throw(err);
    ^

sass.Exception [Error]: Can't find stylesheet to import.
  ╷
1 │ @use "test-import";
  │ ^^^^^^^^^^^^^^^^^^
  ╵
  - 1:1  root stylesheet
    at Object.wrapException (/Users/john/Dev/project-name/node_modules/sass/sass.dart.js:1246:17)
    at _EvaluateVisitor1._evaluate0$_loadStylesheet$4$baseUrl$forImport (/Users/john/Dev/project-name/node_modules/sass/sass.dart.js:80868:19)
    at _EvaluateVisitor1._evaluate0$_loadStylesheet$3$baseUrl (/Users/john/Dev/project-name/node_modules/sass/sass.dart.js:80894:19)
    at _EvaluateVisitor__loadModule_closure4.call$0 (/Users/john/Dev/project-name/node_modules/sass/sass.dart.js:82231:21)
    at _EvaluateVisitor1._evaluate0$_withStackFrame$1$3 (/Users/john/Dev/project-name/node_modules/sass/sass.dart.js:81853:25)
    at _EvaluateVisitor1._evaluate0$_withStackFrame$3 (/Users/john/Dev/project-name/node_modules/sass/sass.dart.js:81859:19)
    at _EvaluateVisitor1._evaluate0$_loadModule$7$baseUrl$configuration$namesInErrors (/Users/john/Dev/project-name/node_modules/sass/sass.dart.js:80323:13)
    at _EvaluateVisitor1._evaluate0$_loadModule$5$configuration (/Users/john/Dev/project-name/node_modules/sass/sass.dart.js:80326:19)
    at _EvaluateVisitor1.visitUseRule$1 (/Users/john/Dev/project-name/node_modules/sass/sass.dart.js:81143:13)
    at UseRule0.accept$1$1 (/Users/john/Dev/project-name/node_modules/sass/sass.dart.js:98288:22)

Note that I also tried variations on the import path but did not have any success:

• @use "test-import.scss";
• @use "./test-import";
• @use "./test-import.scss";
• @use "/Users/john/Dev/project-name/test-import";
• @use "/Users/john/Dev/project-name/test-import.scss";

I’d love to see this resolved as it would make unit testing Sass mixins and functions much simpler.

Thanks!

[jhildenbiddle]

Thanks @nex3 and @jathak.

If you don’t mind me making a suggestion, I think making it more clear that compileString accepts a string or an object containing options would be helpful.

The Usage section states:

Changing this to something like the follow would have made this much more obvious:

• compileString and compileStringAsync take an Options object or a string that represents the contents of a Sass file and return the result of compiling that file to CSS.

It is much more clear that an options object can be passed if a user clicks the compileString link:

Just my $0.02. If everyone else figured it out except me it wouldn’t be the first time. 😄

Thanks again!

[jhildenbiddle]

@nex3 –

Yep. My bad. Thankfully @Goodwine didn’t repeat my mistake in the doc updates. 😃