How can I component-level import a css file from node_modules?

[willwill96]

In my project, we use Bootstrap on one of our pages. However, on every other page, we want to maintain our own custom styling. Right now, we are importing the bootstrap.min.css file in our _app.js file. The problem with this approach is that we import the bootstrap styles throughout the entire application, rather than on the sole page where we want it.

I have looked at the Component-Level CSS docs and it seems like this could be adapted to how i want this to operate.

My line of thinking is that I can import the bootstrap css file, and then re-export it as a module.css. My approach right now is using a CopyWebpackPlugin to rename the boostrap.min.css file to a module.css file. However I'm running into issues because bootstrap has selectors that are not "pure" when I import the module.css file.

Does anyone have any suggestions for how to get around this? Or maybe another approach that I haven't considered to accomplish this?

[jamesmosier]

There is an RFC that relates to this as well as an issue that is similar #13282 (and also a discussion that links a few other issues #15577 (comment))

Unfortunately just renaming it to be a module.css won't work (as you saw first hand). I haven't seen any other ways around this problem.