在角度中使用样式时找不到scss文件

Posted 2023-02-22

【中文标题】在角度中使用样式时找不到scss文件

【英文标题】：not found the scss file when using styling in angular

【发布时间】：2020-08-20 22:39:29

【问题描述】：

我想在 scss 文件中使用 angular 的样式作为短地址。

我通过这种方式使用样式：

我在src 文件夹中创建一个文件夹并将样式放在上面：

然后我去angular-cli.json 并添加这个：

       "stylePreprocessorOptions": 
          "includePaths": [
            "src",
            "src/stylings/",
            "src/stylings/base/",
            "src/stylings/kt-customs/"
          ]
        ,

我需要像这样在style.css 中使用它：

    @import "custom-form";
@import "custom-buttons";
@import "custom-table";
@import "custom-filter";
@import "kt-customise";

但它告诉我这个错误：

> ./src/styles.scss 中的错误 (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src ??embedded!./node_modules/sass-loader/dist/cjs.js??ref--13-3!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/dist/cjs .js??ref--17-1!./src/styles.scss) 模块构建失败（来自 ./node_modules/sass-loader/dist/cjs.js）： SassError：找不到要导入的样式表。 ╷ 9 │ @import "自定义表单"; │ ^^^^^^^^^^^^^ ╵ E:\MyProject\Ava\PFA\demo\src\styles.scss 9:9 根样式表

我该如何解决这个问题？？？？

【问题讨论】：

您找到解决方案了吗？ includePaths中是否需要包含所有可能的路径？

【参考方案1】：

我认为您在 style.scss 中使用的导入路径是错误的。应该是：

@import "./stylings/custom-form";
@import "./stylings/custom-buttons";
@import "./stylings/custom-table";
@import "./stylings/custom-filter";
@import "./stylings/kt-customise";

您可能需要考虑将您的 scss 文件更改为 scss 部分文件。也就是说，用前导下划线重命名您的scss 文件和您的导入。例如_custom-form.scss。

单独的 scss 文件被转换成单独的 css 文件。 css 文件中的每个 @import 都会创建一个 HTTP 请求。这意味着更多的 css 文件 = 更多的 HTTP 请求。导入部分将导致更少的css 文件，因此，更少的 HTTP 请求。你可以在这里阅读更多关于部分的内容：SASS Partials。