title: Syntax Error: Unclosed block on Angular production build
body: <p>I'm getting this strange error when I run <strong>ng build --prod</strong> command in terminal.
  However when no production flag is specified everything builds and runs fine.</p>
  
  <p>Here is the actual error message:</p>
  
  <pre><code>ERROR in ./src/styles.css Module build failed: ModuleBuildError: Module build failed: Unclosed block (1:669)
  &gt; 1 | @import "./common";hr{margin-top:1.5rem;margin-bottom:1.5rem;border:0;border-top:none}.form-control{border-radius:@nb-border-radius;&amp;: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;&amp;:hover{background-color:darken(@common-btn-color,30 %);border-color:darken(@common-border-color,30%)}&amp;:focus,&amp;:hover{box-shadow:0 0 0 @nb-border-radius @common-shadow-color}}.btn-primary:not([disabled]):not(.disabled){&amp;: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.&lt;anonymous&gt; (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
  </code></pre>
  
  <p>The code the error is pointing to is coming from this file <strong>overrides.less</strong>:</p>
  
  <pre><code>@import './common.less';
  
  hr {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border: 0;
    border-top: none;
  }
  
  .form-control {
    border-radius: @nb-border-radius;
  
    &amp;: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;
  
    &amp;: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;
    }
  
    &amp;:focus {
      box-shadow: 0 0 0 @nb-border-radius @common-shadow-color;
    }
  }
  
  .btn-primary:not([disabled]):not(.disabled) {
    &amp;: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;
  }
  </code></pre>
  
  <p>I do override some Bootstrap 4 rules here, it's sort of the point of the file.</p>
  
  <p>And the <strong>common.less</strong> is here:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>I am using WebStorm for the front end development and so far it has always been notifying me about any errors. But now there is nothing.
  All my LESS files are included in my style.css and bundled into style.js by webpack. All configurations are default, coming with a standard angular cli project. Nothing weird about that I guess. </p>
  
  <p>If anyone has any idea about whats wrong here, hope to hear from you soon!</p>
  
  <p><strong>UPDATE</strong>
  And maybe there is a way to compile the css file and export them as something like styles.css instead of styles.js (as it happens now) to be able to see what is wrong with it. Does anyone have an idea what to add to webpack configuration to achieve such thing?</p>