Imported node_modules css not working in webpack - reactjs

Question

I have an external css imports inside one of my components -
import "rc-slider/assets/index.css";
However, when building with webpack, the css in not being registered. I've tried adding an import prefixed with a tilde #import '~rc-slider/assets/index.css'; in my components module.css file, but that does not work. I've also tried adding include: [path.join(__dirname, '..', 'node_modules')], to my webpack.config.js file, and it results in a failed build with multiple errors that say You may need an appropriate loader to handle this file type. for each of my files.
My webpack.config.js file is the following:
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
const HtmlWebPackPlugin = require("html-webpack-plugin");
const autoprefixer = require("autoprefixer");
const path = require("path");
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.(scss|css)$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
importLoaders: 2,
modules: true,
localIdentName: "[name]__[local]__[hash:base64:5]"
}
},
{
loader: "sass-loader"
},
{
loader: "postcss-loader",
options: {
ident: "postcss",
plugins() {
return [autoprefixer];
}
}
},
]
},
{
test: /\.(png|jp(e*)g|gif|svg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 8000,
name: "images/[hash]-[name].[ext]"
}
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html"
}),
new BundleAnalyzerPlugin()
]
};
This has taken up half my day already, so any input would be of huge help. Thank you.

Answer 1

After a few more hours of trial and error, I found a solution. For anyone encountering this issue in the future, I fixed it by adding the following test to my webpack.config.js file -
{
test: /\.(scss|css)$/,
include: [CODEMIRROR_PATH],
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
},
]
},
My fill config setup is the following -
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
const HtmlWebPackPlugin = require("html-webpack-plugin");
const autoprefixer = require("autoprefixer");
const path = require("path");
const CODEMIRROR_PATH = path.resolve(
__dirname,
"./node_modules/rc-slider/assets/index.css"
);
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.(scss|css)$/,
include: [CODEMIRROR_PATH],
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
},
]
},
{
test: /\.(scss|css)$/,
exclude: /node_modules/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
importLoaders: 2,
modules: true,
localIdentName: "[name]__[local]__[hash:base64:5]"
}
},
{
loader: "sass-loader"
},
{
loader: "postcss-loader",
options: {
ident: "postcss",
plugins() {
return [autoprefixer];
}
}
}
]
},
{
test: /\.(png|jp(e*)g|gif|svg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 8000,
name: "images/[hash]-[name].[ext]"
}
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html"
}),
new BundleAnalyzerPlugin()
]
};

Answer 2

Using the include property is definitely the way to go.
I have something similar in my code, and I used this:
{
test: /\.css$/,
include: [CODEMIRROR_PATH],
use: ["style-loader", "css-loader"]
},
I'm including CodeMirror; as such, I define CODEMIRROR_PATH as follows:
const CODEMIRROR_PATH = path.resolve(__dirname, "./node_modules/codemirror");
Does something similar not work for you?