Question

当我在终端中运行 ng build --prod 命令时，我收到了这个奇怪的错误。但是，当没有指定生产标志时，所有内容都会构建并运行良好。

以下是实际的错误消息：

ERROR in ./src/styles.css Module build failed: ModuleBuildError: Module build failed: Unclosed block (1:669)
> 1 | @import "./common";hr{margin-top:1.5rem;margin-bottom:1.5rem;border:0;border-top:none}.form-control{border-radius:@nb-border-radius;&:focus{border-color:@common-border-color;box-shadow:0 0 0 @nb-bo rder-radius @common-shadow-color}}.btn{color:#fff;border-radius:@nb-border-radius;background-color:@common-btn-color;border-color:@common-border-color;&:hover{background-color:darken(@common-btn-color,30 %);border-color:darken(@common-border-color,30%)}&:focus,&:hover{box-shadow:0 0 0 @nb-border-radius @common-shadow-color}}.btn-primary:not([disabled]):not(.disabled){&:active{background-color:darken(@com mon-btn-color,45%);border-color:darken(@common-border-color,45%);box-shadow:0 0 0 @nb-border-radius @common-shadow-color}}.dropdown-menu,.modal-content{border-radius:@nb-border-radius;background-color:@c ommon-bg-color}
    |
                                                                 ^
    at runLoaders (D:\GIT\2017\Web\NutritionBuddy.Client\node_modules\webpack\lib\NormalModule.js:195:19)
    at D:\GIT\2017\Web\NutritionBuddy.Client\node_modules\loader-runner\lib\LoaderRunner.js:364:11
    at D:\GIT\2017\Web\NutritionBuddy.Client\node_modules\loader-runner\lib\LoaderRunner.js:230:18
    at context.callback (D:\GIT\2017\Web\NutritionBuddy.Client\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Object.<anonymous> (D:\GIT\2017\Web\NutritionBuddy.Client\node_modules\css-loader\lib\loader.js:50:18)
    at D:\GIT\2017\Web\NutritionBuddy.Client\node_modules\css-loader\lib\processCss.js:234:4
    at process._tickCallback (internal/process/next_tick.js:109:7) ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./src/styles/overrides.less Module build failed: Unclosed block (1:669)


    at D:\GIT\2017\Web\NutritionBuddy.Client\node_modules\css-loader\lib\processCss.js:226:23
    at process._tickCallback (internal/process/next_tick.js:109:7)
 @ ./src/styles.css 7:10-141
 @ multi ./node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles/common.less ./src/styles/overrides.less ./src/styles/elements.less ./src/styles.css

错误指向的代码来自此文件 overrides.less ：

@import './common.less';

hr {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  border: 0;
  border-top: none;
}

.form-control {
  border-radius: @nb-border-radius;

  &:focus {
    border-color: @common-border-color;
    box-shadow: 0 0 0 @nb-border-radius @common-shadow-color;
  }
}

.btn {
  color: #fff;

  border-radius: @nb-border-radius;
  background-color: @common-btn-color;
  border-color: @common-border-color;

  &:hover {
    background-color: darken(@common-btn-color, 30%);
    border-color: darken(@common-border-color, 30%);
    box-shadow: 0 0 0 @nb-border-radius @common-shadow-color;
  }

  &:focus {
    box-shadow: 0 0 0 @nb-border-radius @common-shadow-color;
  }
}

.btn-primary:not([disabled]):not(.disabled) {
  &:active {
    background-color: darken(@common-btn-color, 45%);
    border-color: darken(@common-border-color, 45%);
    box-shadow: 0 0 0 @nb-border-radius @common-shadow-color;
  }
}

.modal-content {
  border-radius: @nb-border-radius;
  background-color: @common-bg-color;
}

.dropdown-menu {
  background-color: @common-bg-color;
  -webkit-border-radius: @nb-border-radius;
  -moz-border-radius: @nb-border-radius;
  border-radius: @nb-border-radius;
}

我在这里覆盖了一些Bootstrap 4规则，它是文件的重点。

common.less 就在这里：

.top-buffer {
  margin-top: 20px;
}

.clear {
  clear: both;
}

@common-btn-color: #547bd3;
@common-bg-color: #e3f2fd;
@common-border-color: @common-btn-color;
@common-shadow-color: fade(@common-border-color, 60%);
@nb-border-radius: .1rem;

.tile-size {
  min-width: 150px;
  min-height: 150px;
  width: 150px;
  height: 150px;
}

@tile-color: #6bb1e4;
@tile-hover-color: darken(@tile-color, 20%);
@tile-icon-color: #ffffff;
@tile-icon-size: 100px;

.text-line-wrap-size {
  width: auto;
  height: 23px;
}

@text-line-wrap-color: #ffffff;
@tile-text-size: 15px;
@tile-text-color: #444444;

@collection-tile-width: 250px;
.collection-tile-size {
  min-width: @collection-tile-width;
  min-height: 175px;
  width: @collection-tile-width;
  height: 175px;
}

@collection-tile-content-text-size: 13px;
.collection-tile-thumbnail-size {
  width: auto;
  height: auto;
  max-width: 92px;
  max-height: 92px;
}

.form-group-tile-size {
  width: 460px;
  height: auto;
}

我正在使用WebStorm进行前端开发，到目前为止，它一直在通知我任何错误。但现在什么都没有。我的所有LESS文件都包含在我的style.css中，并由webpack捆绑到style.js中。所有配置都是默认配置，带有标准的角度cli项目。我觉得没什么奇怪的。

如果有人对这里的错误有任何疑问，希望尽快收到你的来信！

更新也许有一种方法可以编译css文件并将它们导出为styles.css而不是styles.js（现在发生），以便能够看出它有什么问题。有没有人知道要添加到webpack配置中以实现这样的事情？

语法错误：Angular生成版本

0 个答案: