BUG: SassError: Can't find stylesheet to import. (13.0.0)

[Yberion]

Describe the bug I updated ngx-popperjs from 12.2.1 to 13.0.0 because I'm using Angular 13 but I have an error when importing the scss white theme.

Check the log at the end of the issue.

To Reproduce Steps to reproduce the behavior:

1. Angular 13
2. ngx-popperjs 13.0.0
3. use scss white theme with @import "~ngx-popperjs/scss/theme-white"; or @import "~ngx-popperjs/scss/theme-white.scss";
4. npm start

Using @import "~ngx-popperjs/css/theme-white.css"; works properly.

Expected behavior No error, it was working on version 12.2.1.

Additional context Logs:

./src/main.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/main.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
20 │ @import "~ngx-popperjs/scss/theme-white";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src\main.scss 20:9  root stylesheet

./src/main.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
20 │ @import "~ngx-popperjs/scss/theme-white";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src\main.scss 20:9  root stylesheet
    at tryRunOrWebpackError (D:\XXX\node_modules\webpack\lib\HookWebpackError.js:88:9)
    at __webpack_require_module__ (D:\XXX\node_modules\webpack\lib\Compilation.js:4979:12)      
    at __webpack_require__ (D:\XXX\node_modules\webpack\lib\Compilation.js:4936:18)
    at D:\XXX\node_modules\webpack\lib\Compilation.js:5007:20
    at symbolIterator (D:\XXX\node_modules\neo-async\async.js:3485:9)
    at done (D:\XXX\node_modules\neo-async\async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (D:\XXX\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (D:\XXX\node_modules\tapable\lib\Hook.js:18:14) 
    at D:\XXX\node_modules\webpack\lib\Compilation.js:4914:43
    at symbolIterator (D:\XXX\node_modules\neo-async\async.js:3482:9)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
20 │ @import "~ngx-popperjs/scss/theme-white";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src\main.scss 20:9  root stylesheet
    at Object.<anonymous> (D:\XXX\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!D:\XXX\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!D:\XXX\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[6].rules[1].use[0]!D:\XXX\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[6].rules[1].use[1]!D:\XXX\src\main.scss:1:7)
    at D:\XXX\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:432:11
    at Hook.eval [as call] (eval at create (D:\XXX\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (D:\XXX\node_modules\tapable\lib\Hook.js:14:14)
    at D:\XXX\node_modules\webpack\lib\Compilation.js:4981:39
    at tryRunOrWebpackError (D:\XXX\node_modules\webpack\lib\HookWebpackError.js:83:7)
    at __webpack_require_module__ (D:\XXX\node_modules\webpack\lib\Compilation.js:4979:12)      
    at __webpack_require__ (D:\XXX\node_modules\webpack\lib\Compilation.js:4936:18)
    at D:\XXX\node_modules\webpack\lib\Compilation.js:5007:20
    at symbolIterator (D:\XXX\node_modules\neo-async\async.js:3485:9)

Generated code for D:\XXX\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!D:\XXX\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!D:\XXX\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[6].rules[1].use[0]!D:\XXX\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[6].rules[1].use[1]!D:\XXX\src\main.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n   ╷\n20 │ @import \"~ngx-popperjs/scss/theme-white\";\n   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n   ╵\n  src\\main.scss 20:9  root stylesheet");

× Failed to compile.

[tonysamperi]

Hi,

It's not a bug with the library. Check out Angular docs about upgrading from v12 to V13.

[Yberion]

Hello,

I checked the doc, maybe I'm wrong but there's nothing related to scss import.

There's something about import() but it's related to scripts not the import inside a scss file.

Maybe I didn't find what you were talking about, what's the way to import the scss white them now?

Thanks for the answer.

[Googlproxer]

I'm not sure what causes the issue, but I have found that providing a full relative path to the theme you want to import works for me. e.g. @import "../node_modules/ngx-popperjs/scss/theme-white"

[Sebiworld]

I recently upgraded my project to Angular 13 / ngx-popperjs 13 and ran into the same error. A relative path, like @Googlproxer suggested, seems to work, but I think it's worth investigating why @import "~ngx-popperjs/scss/theme"; does not work anymore...

For a short time I had Angular 13 / ngx-popperjs 12 installed. With this configuration, the error did not appear. And on the other hand, I have other imports in my scss files that continue to work under Angular 13 without having to specify relative paths. E.g." @import "~swiper/swiper.scss";

[tonysamperi]

@Sebiworld the fact is that I perfectly know why it doesn't work anymore...it appears that less and less people are capable of do some research on the web...