How do I exclude a css file from being included as a css module?

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

Software Version(s)
Parcel 1.9.7
Node 8.11.3
npm/Yarn 5.6.0
Operating System Win10

3 thoughts on “How do I exclude a css file from being included as a css module?

  1. This can also be achieved by importing the necessary css in another css with :global{} rule:

    :global {
      @import '~bootstrap/index.css'
    }
    
  2. ideally css modules are only used if suffix .module.css|scss whereas index.css would be treated as vanilla css and index.module.css would be a css module