Importing external stylesheets globally with CSS modules

Question

I'm struggling to add SASS with an external stylesheet (Bulma) to my React application. So far I have set up Parcel with CSS modules via postcss. This is my .postcssrc config:

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    },
    "postcss-modules": {
      "generateScopedName": "[name]_[local]_[hash:base64:5]"
    }
  }
}

I have installed node-sass and successfully added a .scss file to one of my components. External (Bulma) styles are added via @import "~bulma/bulma"; and are correctly resolved.

Unfortunately, imported styles are not applied globally and instead the class names are modified similarly to local definitions, e.g.:

/*! bulma.io v0.8.0 | MIT License | github.com/jgthms/bulma */
@-webkit-keyframes container_spinAround_28_Bz {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(359deg); } }
@keyframes container_spinAround_28_Bz {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(359deg); } }

Note the added prefixes and suffixes.

Ideally, I would like to import the stylesheet globally and do not modify their names. I'd like to continue using CSS modules and I think I also have to use SASS in order to globally modify Bulma stylesheet by overriding SASS variables.

Anyway, things I've tried so far:

Using postcss-nested and wrapping the import with :global block:

:global {
  @import "~bulma/bulma";
}

However, this throws an exception:

main.scss:5018:5: Missing whitespace before :global

Creating a separate scss file included directly in HTML file via <link> rather than imported in a jsx/tsx file to avoid using CSS modules.

This seems to break Parcel entirely, as it fails to link correct files in the compiled HTML files, i.e. <LONG-HASH>.css instead of generated main.<HASH>.css.

Using postcss-import.

Either my setup is incorrect or it has no effect on SASS files.

score 3 · Accepted Answer · answered Mar 16 '20 at 09:02

3

You can define regular expressions to mark matched files as global stylesheets with the globalModulePaths setting.

    "postcss-modules": {
      "globalModulePaths": [
        ".*\\.global\\..*"
      ]
    }

The example above would mark all files with .global. in their name, e.g. main.global.css.

Managed to figure it out while writing the question.

answered Mar 16 '20 at 09:02

Czyzby

2,999
1
22
40

1

Thanks, I tried a million other answers, but only yours worked! I added it to a `.postcssrc.json` and I can confirm, it works that way too. – Johnny Fekete Jan 10 '21 at 17:27
How are you importing the 'main.global.css' file? like this: import '../../main.global.css'; – Juanma Menendez May 19 '22 at 16:28
Thank you for this. I searched and tried a lot, I don't think this is possible in the postcss (i.e. without postcss-modules plugin). I could either use modules or use global (Plain CSS) but not both. Using this plugin I could do both. – Ritesh Jagga Jul 22 '22 at 07:34

score 0 · Answer 2 · answered May 20 '22 at 20:39

The only solution that worked for me to load global CSS styles from rollup (when applying preserveModules: true) was using the 'rollup-plugin-styles' plugin and the following configuration:

// rollup.config.js

   plugins: [
     styles({
        extensions: ['.css'],
        use: ['css'],
     }), …
  ]

// In the package.json you have to add the proper side effects

{
 "sideEffects": [
  "**/*.css",
  "**/*.css.js" //this one is very important too            
], 
 }

// MyComponent.tx

import '../styles/myGlobal.css';

Importing external stylesheets globally with CSS modules

2 Answers2