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

Question

我在一个angular项目中有一个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

您说得对，它被放在angular.json文件的styles属性中。

此外，扩展名并不重要，编译器无论如何都会将其转换为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";