Issues Importing .css file from node_modules

[wapplegate]

Hey there, I'm using this library to bundle up a sass file that includes imports from node_modules. I'm importing styles from Bootstrap 4 and Angular Material. Bootstrap 4 imports resolve fine using this syntax:

import ~bootstrap/scss/functions;

"functions" is an actual .scss file in the node_modules folder.

However, I tried to do the same with styles from the Angular Material library:

"import ~@ angular/material/prebuilt-themes/indigo-pink;"

"indigo-pink" is a .css file, not .scss. When I try to bundle I get this error:

[Error] There is an error in your styles:
"File to import not found or unreadable: ~@ angular/material/prebuilt-themes/indigo-pink. on line (3070, 1)"

Notice the period added at the end of the file name? If I try to import the file by specifying the file extension ".css" like so: import "~@ angular/material/prebuilt-themes/indigo-pink.css"; I don't get an error but I get this:

"........\node_modules@ angular\material\prebuilt-themes\indigo-pink.css.scss [NOT FOUND]"

It seems the .scss file extension is added to the file name before searching for it.

It looks like there is an issue bundling scss files that import .css files? If I do this same import: @import "~@ angular/material/prebuilt-themes/indigo-pink"; in the Angular application's styles.scss file, which is packaged by the Angular CLI, it works fine. I also just tested a .css file in the same directory as my .scss using import "./test"; and the same issue occurred: "test.scss [NOT FOUND]"

I would expect the contents of .css file be added to the contents of the .scss file. Am I wrong to think that?

I'm using package version "scss-bundle": "^2.2.0" on a Windows 10 machine.

[nikojpapa]

I have the same problem. My temporary workaround is the use the BundleAll function and combine the results manually.

var result =  bundler.BundleAll(<FilesToBundleArray>);
result.then(function (res) {
    var bundledScss = "";
    for (var bundledResult of res) {
      var content = bundledResult.bundledContent;
      bundledScss += content + "\n\n";
    }
}

[MartynasZilinskas]

We are busy working on projects right now. But we are accepting PRs. And we can check them way faster than writing the code from scratch. 😉

[arpit-agarwal]

I can provide a quick PR on this but with only the partial fix. i.e if extension is found on import then we will not prepend .scss. is that acceptable?
hence @import "~@ angular/material/prebuilt-themes/indigo-pink.css" this will work without any issue

[MartynasZilinskas]

Sounds good to me. 👍