My webpack configuration includes the following module for processing SCSS files:
{
test: /atffonts\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: 'style/[name].css',
},
},
'extract-loader',
'css-loader',
'sass-loader',
],
}
The goal of this code is to transform an SCSS file into valid CSS.
I am in the process of upgrading to Webpack v5 and exploring the use of asset modules. While I can still use the deprecated file-loader, my aim is to move away from reliance on outdated features.
I have refactored the code as follows:
{
test: /atffonts\.scss$/,
type: 'asset/resource',
generator: {
filename: 'style/[name].css',
},
use: [
'extract-loader',
'css-loader',
'sass-loader',
],
}
This revised code successfully generates a file, but the resulting content is not valid CSS. Instead, it produces:
// Content generation script example
// This part should be properly generated CSS
var content = require("!!../../node_modules/css-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js!../../node_modules/style-loader/index.js!../../node_modules/css-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js!./atffonts.scss");
// Continue your processing here...
I am uncertain if my approach aligns with the asset module concept. Should I revisit my implementation or continue using the deprecated file-loader temporarily?