Our current codebase was originally built with Angular, utilizing the Angular CLI and its default webpack configuration. However, as we transition towards using web components, we are faced with the challenge of incorporating SCSS within our web component TS files. To address this, we developed a new webpack loader that adds the necessary SCSS file as a dependency, waits for the CSS to be compiled by the sass-loader, and then inserts it into our TS file using a string replacement method.
While this setup functions well in a standard webpack environment, Angular processes SCSS files differently, resulting in the SCSS files being converted into JavaScript. This transformation is not required for files ending in .webcomponent.scss.
The question is: How can we instruct Angular not to apply its default loaders to our *.webcomponent.scss files?
The extra-webpack-config.js file contains the following configuration:
module.exports = {
module: {
rules: [
{
test: /\.webcomponent\.ts$/,
use: [
{
loader: './webcomponent-loader.js'
}
]
},
{
test: /\.webcomponent\.scss$/,
use: [
{
loader: 'sass-loader'
}
]
}
]
}
};
Additionally, our angular.json file includes a custom webpack configuration:
"customWebpackConfig": {
"path": "./extra-webpack.config.js",
"mergeStrategies": {
"module": "prepend",
"loaders": "replace"
}
}
Within the webcomponent-loader, the code snippet used is:
this.addDependency(this.resourcePath.replace(/.ts$/, '.scss'));
Unfortunately, the above implementation results in the error message:
Invalid CSS after "module.exports": expected selector, was '= "/*Colors*/\\n/*Bl'
It appears that Angular has converted the SCSS code into JavaScript. Any assistance on resolving this issue would be greatly appreciated.