Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jase88 opened this issue Jan 26, 2021 · 13 comments · May be fixed by #50
Open

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

jase88 opened this issue Jan 26, 2021 · 13 comments · May be fixed by #50

Comments

@jase88
Copy link

jase88 commented Jan 26, 2021

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
Copy link
Author

jase88 commented Feb 1, 2021

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
Copy link

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

@corysmc
Copy link

corysmc commented May 15, 2021

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
Copy link
Author

jase88 commented May 15, 2021

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
Copy link

corysmc commented May 16, 2021

Thanks @jase88 that helps!

@tfrijsewijk
Copy link

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

@dgonzalezr
Copy link

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
Copy link

Wvduijn commented Apr 7, 2022

@dgonzalezr This works for me! Nice man thanks!

@rallz-dev
Copy link

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
Copy link

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
Copy link

This fixed the issue on Windows:

import path from 'path';

...

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

@dgonzalezr
Copy link

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
Copy link

damorossi commented Jan 12, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

10 participants