stylePreprocessorOptions在@Angular/cli 7上不起作用

Question

因此，我正在尝试“白化”我的应用程序，允许为多个客户提供多种设计选项。在我的组件的scs中，我需要加载一个'_variables.scss‘，它位于'themes’文件夹下，结构是这样的：

/
- themes
-- client-1
--- _variables.scss
-- client-2
--- _variables.scss

在我的angular.json中，我有这样的配置：

"projects": {
  "client-1": {
     ...
     "architect": {
       "build": {
         ...
         "options": {
           ...
           "stylePreprocessorOptions": {
             "includePaths": [
               "themes/client-1"
             ]
           },
           "styles": [
             "src/styles.scss",
           ]
           ...
         }
         ...
       }
     },

     "client-2": {
     ...
     "architect": {
       "build": {
         ...
         "options": {
           ...
           "stylePreprocessorOptions": {
             "includePaths": [
               "themes/client-2"
             ]
           },
           "styles": [
             "src/styles.scss",
           ]
           ...
         }
         ...
       }
     }
  }

根据documentation，我做得很正确，但是我的scss文件没有正确地加载文件的“变量”。这是对我的scss文件的导入：

@import "variables";

这是发生的错误：

ERROR in ./src/app/app.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import "variables";
^
      File to import not found or unreadable: variables.
      in /Users/erick/Projects/sample-project/src/styles.scss (line 2, column 1)

这里有什么建议吗？

Answer 1

我找到了问题所在。

我在angular.json中加载的是themes/client-X而不是src/themes/client-X。

Answer 2

我在运行测试时遇到了同样的问题，解决方案是将相同风格的stylePreprocessorOptions添加到angular.json中的测试配置和构建配置中