How to properly import an SCSS that imports other CSS / SCSS

Question

I have an SCSS in an angular project that's importing another SCSS from node_modules:

@import "node_modules/grapesjs/src/styles/scss/main.scss";

That SCSS imports other styles:

@import "node_modules/spectrum-colorpicker/spectrum";
@import "node_modules/font-awesome/scss/font-awesome";
@import "node_modules/codemirror/lib/codemirror";
@import "node_modules/codemirror/theme/hopscotch";


@import "gjs_variables.scss";

But that causes this error:

I am guessing this means I need to specify the path properly. I have this in my angular.json:

        "stylePreprocessorOptions": {
          "includePaths": [
            "src/styles",
            "."    // **this is where the node_modules directory is**
          ]
        },

My guess is that the path in main.scss is relative to that file. I can't figure out how to specify that.

Answer 1

You're right, it's put in the styles property of your angular.json file.

Also, it doesn't matter the extension, the compiler will convert it to JS anyway (unless it's an asset, then it stays as it is)

The path is

./node_modules/...

Answer 2

To import the style from node_modules use ~ prefix like this

@import "~bootstrap/scss/bootstrap";
@import "~font-awesome/scss/font-awesome";
@import "~toastr/toastr";
@import "~react-select/dist/react-select.css";
@import "~react-bootstrap-table/dist/react-bootstrap-table-all.min.css";