CSS Causes Error

I’m submitting a … (check one with “x”)

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

importing the css causes errors ERROR in ./src/styles.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/styles.css) Module build failed (from ./node_modules/postcss-loader/lib/index.js): Error: Can't resolve 'ngx-smart-modal/ngx-smart-modal' in '/Users/_kane7161/app/src' Expected behavior

I would expect to import the css file and the project would build Reproduction of the problem Import using this statement in styles.css /* You can add global styles to this file, and also import other style files */ @import "~ngx-smart-modal/ngx-smart-modal";

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

macOS 13.4

• Smart Modal version: 0.8.x

• Angular version: 2.0.x

Node: 9.11.1
OS: darwin x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.8.6
@angular-devkit/build-angular     0.8.6
@angular-devkit/build-optimizer   0.8.6
@angular-devkit/build-webpack     0.8.6
@angular-devkit/core              0.8.6
@angular-devkit/schematics        0.8.6
@angular/cli                      6.2.6
@angular/fire                     5.1.0
@ngtools/webpack                  6.2.6
@schematics/angular               0.8.6
@schematics/update                0.8.6
rxjs                              6.2.2
typescript                        2.9.2```
* **Browser:** [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
<!-- All browsers where this could be reproduced -->
Chrome
Safari
* **Language:** [all | TypeScript X.X | ES6/7 | ES5]

[maximelafarie]

Hi @mikeKane! Firstly, thank you for using our library and for posting a full detailed issue! 😉

If you want to import scss styles of the library, you can import it this way (without specifying the file extension):

@import "~ngx-smart-modal/ngx-smart-modal";

So in your case, if you’re not using any style preprocessor and want to use css only, you have to import the library style file this way (please note the .css at the end of the import path):

@import "~ngx-smart-modal/ngx-smart-modal.css";

Let me know if it solves your issue!

Happy coding! 🖖

[mikeKane]

Thank you sooo much! This worked. Your library is fantastic.

I’m a noob with Ng so it may make sense to add this to the docs? If this is open source I can make some doc changes for noobs like me if you guys are ok with it.