Encountered a unique issue while attempting to import a CSS file from a node module.
In the App.tsx file, the following imports were made:
import './App.css'; // successful
import '@foo/my-dependency/dist/foo.css'; // unsuccessful
Importing a local CSS file works smoothly, but importing foo.css from a node module does not seem to work at all, despite no compilation errors being detected.
Interestingly, changing the import line to use the require syntax resolves the issue.
require('@foo/my-dependency/dist/foo.css'); // successful
Alternatively, utilizing CSS module-like syntax also produces the desired outcome.
import style from '@foo/my-dependency/dist/foo.css'; // successful
console.log(style); // verifying that the imported content is utilized
To enable the above functionality, it is necessary to include CSS module type declaration as indicated here.
The exact cause of the problem remains unclear. Below is an overview of my Webpack configuration on module rules. Additionally, I am using webpack dev server for testing with Webpack version 5.23.0.
module: {
rules: [
{
test: /\.(jsx?|tsx?)$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader',
],
}
],
},