如何在 Angular 中使用 sass-loader？

Question

如何在 Angular 中开启 sass-loader？

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

但我收到消息；

找不到或无法读取要导入的文件：theme.scss。

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

文件 theme.scss 包含变量：

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

Answer 1

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

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

您的默认资产路径应该是

"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'; 一样导入它