Build fails with "Can't find stylesheet to import." if injectGlobalPaths is used

[jase88]

Current Behavior

If using injectGlobalPaths parameter

plugins: [
    sass({
      injectGlobalPaths: ['src/globals/variables.scss'],
    }),
  ],

the build fails with

[ ERROR ]  sass error: ...tencil-example/libs/web-components/src/components/my-component/my-component.scss:1:9
           Can't find stylesheet to import.

If I leave out the parameter, the builds succeeds.I suspect the path resolution not working correctly on my nx workspace, because it works on a simple stencil project.

Expected Behavior

using injectGlobalPaths parameter should work without causing issues

Context (Environment)

• nx 11 workspace
• @stencil/core 2.3.0
• @stencil/sass: 1.4.1
• Windows

Steps to Reproduce

1. clone https://github.com/kerosin/nx-stencil-example
2. call nx build web-components

[jase88]

reason is that context.config.rootDir points to nx-stencil-example\dist\libs\web-components instead of nx-stencil-example/libs/web-components/stencil.config.ts

So resolving the paths injectGlobalPaths is errornous and causes an error on the dart sass package.

[janrembold]

@jase88 Is there any workaround for this issue? For me this feature is completely broken right now :(

[corysmc]

I'm also having issues with this.
nx workspace using stencil, and I'm getting the same error when trying to inject global paths. Anyone come up with a workaround?

[jase88]

So what this global path does is just adding your globals to the head of each scss file with @use myGlobal.

So the only workaround I can think of would be a own script that automatically writes your global files at the top :/

[corysmc]

Thanks @jase88 that helps!

[tfrijsewijk]

You could try version 2.0.0-0, which is released 13 days ago but with dist-tag next instead of latest

[dgonzalezr]

I just faced the same issue while trying to move my NPM monorepo to Nx workspaces, what worked for me with @stencil/sass v1.5.2 was concatenating the path with __dirname:

plugins: [
  sass({
    injectGlobalPaths: [`${__dirname}/src/globals/variables.scss`],
  }),
],

Hope it helps 🙂

[Wvduijn]

@dgonzalezr This works for me! Nice man thanks!

[rallz-dev]

Even with the solution proposed by @dgonzalezr , I'm getting the same "Can't find stylesheet to import" error. Is there any updates on this issue?

[jaredtbates]

We are seeing the same issue, but fixed on Mac/Linux when using the fix from @dgonzalezr. It still doesn't work on Windows though.

[jaredtbates]

This fixed the issue on Windows:

import path from 'path';

...

  plugins: [
    sass({
      injectGlobalPaths: [
        path
          .resolve(__dirname, `src/styles/variables.scss`)
          .replace(/\\/g, '/'),
      ],
    }),
  ],

[dgonzalezr]

This fixed the issue on Windows:

import path from 'path';

...

  plugins: [
    sass({
      injectGlobalPaths: [
        path
          .resolve(__dirname, `src/styles/variables.scss`)
          .replace(/\\/g, '/'),
      ],
    }),
  ],

Indeed, my solution only works on Unix, I was struggling with the same issues on Windows, @jaredtbates you've "saved my life" 😆 )))

[damorossi]

Hello, guys, if you have worked before with sass, the imports are usually @import 'my-sass-file', without extension. Also many times we are not used to use './......' in our imports, for which this could be helpful:
for example, my file is called colors.scss

plugins: [
   sass({
     injectGlobalPaths: [
       './src/global/colors'
     ],
   }),
 ],

I hope it helps.