❔ Question

Can I exclude certain css files from being bundled as css modules?

🔦 Context

I’m building a SPA and have split the project into several npm modules. I’m using React, Typescript and PostCSS to CSS Modules for my components. This works fine. However, sometimes I want to use third party react components, that I need to style with custom CSS. In particular I’m currently trying to style the datepicker “react-datetime”. To include the default css that comes with the component I simply add

import "react-datetime/css/react-datetime.css"

and the css is bundled correctly.

But, I do not want to use the default styling, so I’ve added my own css file. To import this one I use:

import "./custom.css";

But this time the css file is imported as a module and all css names are converted and no longer match the css names found in the html produced by the datetime component.

So the question is: Can I exclude certain files from this “css module” processing?

To enable Css Modules in parcel I added a postcss.config.js to the root of my project. It has the following content:

module.exports = {
  "modules": true
};

💻 Code Sample

🌍 Your Environment