Question

更新我认为使用颜色变量导致了这个问题！当我将_colors.scss移动到styles.scss并分配静态颜色值时，我设法通过这个，虽然它不漂亮。

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

我正在开发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.

anfular-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"
      }
    }
  ]

styles.scss：

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

_layout.scss：

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

_color.scss：

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;
    }
}

导入sass子文件时Webpack无法编译

0 个答案: