title: Override angular loaders for specific files
body: <p>We have a codebase that was created using angular, which uses the angular cli and it's default webpack config. However, we are starting to move away from angular and towards webcomponents. In order to use scss within our webcomponent ts files, we created a new webpack loader in which we add the correct scss file as a dependency, wait for the compiled css from sass-loader and insert it into our ts file using a string replace.</p>
  
  <p>This works fine in a normal webpack environment. However, angular also processes the scss files, by using a few different loaders. Because of this, the scss file no longer contains actual scss, but javascript. This is still needed for our other scss files, but not for the ones ending in .webcomponent.scss.</p>
  
  <p>How can I tell angular to stop using it's default loaders for my *.webcomponent.scss files?</p>
  
  <p>My extra-webpack-config.js looks like this:</p>
  
  <pre><code>module.exports = {
      module: {
          rules: [
              {
                  test: /\.webcomponent\.ts$/,
                  use: [
                      {
                          loader: './webcomponent-loader.js'
                      }
                  ]
              },
              {
                  test: /\.webcomponent\.scss$/,
                  use: [
                      {
                          loader: 'sass-loader'
                      }
                  ]
              }
          ]
      }
  };
  </code></pre>
  
  <p>And my angular.json has the following custom webpack config:</p>
  
  <pre><code>"customWebpackConfig": {
      "path": "./extra-webpack.config.js",
      "mergeStrategies": {
          "module": "prepend",
          "loaders": "replace"
      }
  }
  </code></pre>
  
  <p>Within the webcomponent-loader I use</p>
  
  <pre><code>this.addDependency(this.resourcePath.replace(/.ts$/, '.scss'));
  </code></pre>
  
  <p>This gives me the following error:</p>
  
  <pre><code>Invalid CSS after "module.exports": expected selector, was '= "/*Colors*/\\n/*Bl'
  </code></pre>
  
  <p>This tells me angular converted it to js code.
  Any help is greatly appreciated.</p>