Angular 导入sass子文件时未能编译Webpack

更新 我认为使用颜色变量导致了这个问题！当我将我的_colors.scs移动到style.scs并分配静态颜色值时，我成功地完成了这一过程，尽管它并不漂亮

=================================================

我正在处理angular cli项目，在styles.scss中导入某些sass文件时，Webpack无法编译

我有其他子文件，当我不导入这些文件时，它工作得很好（_layout.scss和_color.scss）

特别是在反复尝试之后，这里有两件事情导致了此错误： -两个文件中使用的颜色变量 -在文件中导入字体“CaeciliaCom”

所有sass子文件都位于“资产”下

我得到这个错误

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":["**/src/main/ngapp/src/sass"]}!./src/styles.scss
Module parse failed: ***/src/main/ngapp/node_modules/css-loader/index.js?{"sourceMap":false,"importLoaders":1}!/Users/moal4675/Projects/printtool-app/src/main/ngapp/node_modules/postcss-loader/index.js?{"ident":"postcss"}!***/src/main/ngapp/node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":["***/src/main/ngapp/src/sass"]}!***/src/main/ngapp/src/styles.scss Unterminated string constant (6:25)
You may need an appropriate loader to handle this file type.

Anfull-cli.josn：

  "apps": [
    {
      "root": "src",
      "outDir": "../webapp/ng",
      "assets": [
        "assets"
      ],
      "stylePreprocessorOptions": {
        "includePaths": [
          "sass"
        ]
      },
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      },
      "defaults": {
        "styleExt": "scss"
      }
    }
  ]

样式。scss:

@import "assets/sass/layout";
@import "assets/sass/colors";
@import "assets/sass/icons";
@import "assets/sass/marginsAndPadding";
@import "assets/sass/misc";

/* Color variables */
$main-color: #002e5f;
$alternative-color: rgba(0, 47, 95, 0.3);
$alternative-color2: rgba(0, 47, 95, 0.8);
$opposite-color: #FFFFFF;

header, footer {
    background-color: $main-color;
    color: $opposite-color;

    #userInfoToggle {

        &.userInfoToggled {
            color: $main-color;
        }
    }

    #userInfoMenu {
        background-color: $opposite-color;
        color: $main-color;
    }

    .popover-title {
        color: $main-color;
    }
}

/* Links */

a, .link-color {
    color: $main-color;

    &:hover, &:active, &:focus {
        color: $alternative-color2;
    }
}

\u布局。scss:

@import "assets/sass/layout";
@import "assets/sass/colors";
@import "assets/sass/icons";
@import "assets/sass/marginsAndPadding";
@import "assets/sass/misc";

/* Color variables */
$main-color: #002e5f;
$alternative-color: rgba(0, 47, 95, 0.3);
$alternative-color2: rgba(0, 47, 95, 0.8);
$opposite-color: #FFFFFF;

header, footer {
    background-color: $main-color;
    color: $opposite-color;

    #userInfoToggle {

        &.userInfoToggled {
            color: $main-color;
        }
    }

    #userInfoMenu {
        background-color: $opposite-color;
        color: $main-color;
    }

    .popover-title {
        color: $main-color;
    }
}

/* Links */

a, .link-color {
    color: $main-color;

    &:hover, &:active, &:focus {
        color: $alternative-color2;
    }
}

\u color.scss:

@import "assets/sass/layout";
@import "assets/sass/colors";
@import "assets/sass/icons";
@import "assets/sass/marginsAndPadding";
@import "assets/sass/misc";

/* Color variables */
$main-color: #002e5f;
$alternative-color: rgba(0, 47, 95, 0.3);
$alternative-color2: rgba(0, 47, 95, 0.8);
$opposite-color: #FFFFFF;

header, footer {
    background-color: $main-color;
    color: $opposite-color;

    #userInfoToggle {

        &.userInfoToggled {
            color: $main-color;
        }
    }

    #userInfoMenu {
        background-color: $opposite-color;
        color: $main-color;
    }

    .popover-title {
        color: $main-color;
    }
}

/* Links */

a, .link-color {
    color: $main-color;

    &:hover, &:active, &:focus {
        color: $alternative-color2;
    }
}

---

您是否已将

webpack

配置为加载

sass

文件？如何配置？我在做angular cli项目！Webpack配置文件在源代码中，我不希望对其进行更改。请尝试使用命令

npm install node sass

安装

node sass

@GhanshyamSingh是否仅安装该软件包？如果是，我仍然得到相同的错误！更新到Angular 4.3和Angular cli 1.2.1时，我遇到了相同的错误