Error: Can't find stylesheet to import.

[dagda1]

I have a sass file that imports a file from node_modules using the tilde prefix:

@import '~@cutting/component-library/src/styles/_index.scss';

When I try and run this using renderSync I get the following error:

3 │ @import '~@cutting/component-library/src/styles/_index.scss';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
Users/paulcowan/projects/cuttingedge/packages/website/src/assets/scss/_main.scss 3:9 @import
stdin 1:9 root stylesheet
at Object._newRenderError (/Users/paulcowan/projects/cuttingedge/node_modules/sass/sass.dart.js:10687:19)
at Object._wrapException (/Users/paulcowan/projects/cuttingedge/node_modules/sass/sass.dart.js:10537:16)
at StaticClosure._renderSync (/Users/paulcowan/projects/cuttingedge/node_modules/sass/sass.dart.js:10512:18)
at Object.Primitives_applyFunction (/Users/paulcowan/projects/cuttingedge/node_modules/sass/sass.dart.js:1055:30)
at Object.Function_apply (/Users/paulcowan/projects/cuttingedge/node_modules/sass/sass.dart.js:4882:16)

This works when I use the sass-loader and webpack to parse the files like this.

I am trying to fix a bug in typescript-plugin-css-modules which uses sass-dart and I would be interested to know if sass-dart supports tilde imports?

I have a failing test which you can reproduce like this:

git clone https://github.com/dagda1/typescript-plugin-css-modules.git
cd typescript-plugin-css-modules
npm install
git checkout pc/tilde-import
npm test

The test file is here and the fixture it uses here

[dagda1]

actually, the ~ was a workaround in the sass-loader that was fixed in this PR.

If I remove this tilde from my import and include node_modules in the includePaths in renderSync then all is good.

      transformedCss = sass
        .renderSync({
          data: css,
          includePaths: [
            filePath,
            'node_modules'
          ],
        })
        .css.toString();

[danny007in]

but how in dart-sass by https://www.npmjs.com/package/node-sass-package-importer using cli method node-sass --importer node_modules/node-sass-package-importer/dist/cli.js -o dist src/index.scss

[zaydek]

@danny007in Try using --load-path or -I:

-I, --load-path=<PATH>         A path to use when resolving imports.

[sattes-faction]

@zaydek unfortunately that doesn't work, because the '~' is not stripped.

[danny007in]

@zaydek unfortunately that doesn't work, because the '~' is not stripped.

u need to remove ~

[sattes-faction]

Yes I know, but it would be nice if dart sass could follow the webpack scheme here, because the ~ is also recognized across all IDEs properly. In my case I have the issue that a scss file using that import scheme is used by a webpack config and also by the cli dart sass (part of ongoing migration).

In node sass it was possible to use a custom importer using the --importer flag on command line, but that's not possible with dart sass (which is recommended by node sass).

[danny007in]

@sattes-faction create new issue for that

[mdownes]

@sattes-faction create new issue for that

Has an issue been created for this?. I have had to use the tilde-sass package to get around this.

[lonix1]

@mdownes I also tried to use that node-sass-tilde-importer package but couldn't get it to work. What does your cli syntax look like, if you don't mind?

[mdownes]

@mdownes I also tried to use that node-sass-tilde-importer package but couldn't get it to work. What does your cli syntax look like, if you don't mind?

I just added this to my package.json

“Build:sass”:”tilde-sass —file src/styles.scss —outfile dist/“

My styles.scss looked something like this:

@use “~/somedirectory/somefile.scss”