How to exclude boot files when including CSS modules
I use both bootstrap and CSS css-loader
modules , enabling the modules option in my project, and unfortunately css-loader
also applies scoping to bootstrap files.
I have app.scss
where I import all suststrap sass files. And I import the file app.scss
to a file app.js
:
import "./app.scss";
{ test: /\.scss$/,
use: [
{loader: "style-loader"},
{
loader: "css-loader",
options: {
sourceMap: true,
modules: true,
localIdentName: "[path][name]__[local]--[hash:base64:5]"
}
},
{loader: "sass-loader"}
]
for example the bootstrap class .table
turns into something like.app__table--19A_z
Do you think I can disable CSS modules for boot files.
source to share
This can be accomplished with module rule.exclude
The condition must NOT match. The convention is to provide a string or an array of strings here, but it doesn't apply.
so to exclude the scrap boostrap file you should like the following:
{
test: /\.scss$/,
use: ...
exclude: [
path.resolve(__dirname, "node_modules/bootstrap"),
]
}
source to share
This cannot be done simply with exclude
, because you are importing the bootstrap scst files into your single entry scss application files.
And it can't be fully implemented with the global select scope, but it can definitely get close to getting the job done, especially if you're not using postcss.
To see the current discussion on this topic, please consider this github issue: https://github.com/css-modules/css-modules/pull/65
source to share