Как правильно импортировать SCSS, который импортирует другие CSS / SCSS

Question

У меня есть SCSS в угловом проекте, который импортирует другой SCSS из node_modules:

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

Этот SCSS импортирует другие стили:

@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";

Но это вызывает эту ошибку:

Я предполагаю, что это означает, что мне нужно правильно указать путь.У меня есть это в моем angular.json:

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

Я предполагаю, что путь в main.scss относительно этого файла.Я не могу понять, как это указать.

Answer 1

Чтобы импортировать стиль из node_modules, используйте префикс ~ как этот

@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";

Answer 2

Вы правы, оно помещается в свойство styles вашего angular.json файла.

Кроме того, расширение не имеет значения, компилятор все равно преобразует его в JS (если только он не является активом, то он остается как есть)

Путь

./node_modules/...