`type: 'asset/source'` in Webpack v5.96.0 Causing CSS Files Not to Be Packaged

Issue with type: 'asset/source' in Webpack v5.96.0 Causing CSS Files Not to Be Packaged


My project is an Angular project with a custom-written Webpack configuration.

Problem Description


When using Webpack version 5.95.0, I used the following configuration to handle CSS files, and the CSS files were correctly packaged during the build process, with styles displaying properly on the page. However, after upgrading Webpack to v5.96.0, the CSS files are no longer packaged during the build process, causing the page styles to fail.

mjs Configuration Code:


{
test: /\.css$/,
type: 'asset/source',
include: [
helpers.root('_COMMON', 'archive', 'webcomponent'),
new RegExp('OPF\\' + path.sep + '.*\\' + path.sep + 'src\\' + path.sep + '.*\\' + path.sep)
]
}

header Component:


@Component({
selector: "header",
templateUrl: "./header.component.html",
styleUrls: ["./header.css"]
})

header.css:


.sample {
background-color: #ccc;
}

Debugging Findings


After debugging, I found that the [webpack\lib\asset\AssetSourceGenerator.js] file in Webpack v5.96.0 has been modified. In v5.95.0, it directly returns [return TYPES]. The new logic in v5.96.0 causes originModule to be null, which prevents the CSS files from being correctly processed.

If I comment out type: 'asset/source' and replace it with use: ['raw-loader'], the CSS files are correctly packaged and the styles display properly:

Alternative Configuration:


{
test: /\.css$/,
include: [
helpers.root('_COMMON', 'archive', 'webcomponent'),
new RegExp('OPF\\' + path.sep + '.*\\' + path.sep + 'src\\' + path.sep + '.*\\' + path.sep)
],
use: ['raw-loader']
}

Environment Information

• Webpack Version: v5.96.0
• Node.js Version: 20.18.2
• Operating System: Windows 11 22H2

Question


What additional configuration is needed when using type: 'asset/source' to ensure that CSS files are correctly packaged?

Continue reading...