angular - 如何在 Angular 中使用 sass-loader？

Question

如何在 Angular 中开启 sass-loader？

我尝试使用 @import "theme.scss";在 *.scss` 文件中。

但是我收到消息；

File to import not found or unreadable: theme.scss.

我不使用 webpack，只使用 tsconfig 和 angular.jon

文件 theme.scss 包含变量:

$border-radius: 10px;
$main: rgb(20, 100, 192);

Answer 1

导入.scss文件到其他.scss文件

您可以使用 Assets 路径中文件的相对路径在其他 .scss 文件中指定 .scss。

你的默认 Assets 路径应该是

"assets": [
              "src/favicon.ico",
              "src/assets"
            ]

在 angular.json 文件中定义。

例子:

• 你有一个app.component.scss
• 你的 theme.scss 文件在 ./src/assets/theme/theme.scss

然后你可以将它导入 app.component.scss 中，例如:

@import '../assets/theme/theme.scss';

指定样式预处理器选项以缩短导入时间

如果你想像你描述的那样缩短路径，只需将路径添加到 angular.json 文件中的 stylePreprocessorOptions 即可:

"architect": {
        "build": {
          ...
          "options": {
            ...
            "stylePreprocessorOptions": {
              "includePaths": [
                "./src/assets/style/theme"
              ]
            },
         },
         "test": {
           ...
           "options": {
             ...
             "stylePreprocessorOptions": {
               "includePaths": [
                 "./src/assets/style/theme"
               ]
             }
           }
         }
}

然后你应该能够包含你的文件，如 @import 'theme.scss';

• 要了解更多信息，请阅读:https://github.com/angular/angular-cli/wiki/stories-global-styles
• 官方文档:https://angular.io/guide/workspace-config
• 我使用的来源:How to short path to file in Angular?

描述更改后更新

我想你设置了错误的相对路径。因此，您需要像这样设置 stylePreprocessorOptions:

"includePaths": ["./src/lib"]

在 build 和 test 中

设置好之后，你可以把任何主题文件放在那里，喜欢:

./src/lib/theme.scss 并像 @import 'theme.scss';

一样导入它