如何正确导入导入其他CSS / SCSS的SCSS

Question

我在一个有角度的项目中有一个SCSS，该项目正在从node_modules导入另一个SCSS：

@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

您是对的，它位于styles文件的angular.json属性中。

此外，扩展也没关系，编译器无论如何都会将其转换为JS（除非是资产，然后保持原状）

路径是

./node_modules/...

Answer 2

要从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";