'Importing external stylesheets globally with CSS modules

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.

sassbulmapostcsscss-modulesparceljssqlamazon-redshift


Solution 1:[1]

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';

Solution 2:[2]

You have partitioned by TRUNC(CD.date) which breaks up the count groups in a way I think you don't want. Are you looking for this?

COUNT(customer_email) OVER(PARTITION BY tier ORDER BY day ASC 
    ROWS UNBOUNDED PRECEDING) AS "customers"

PS. You can use "day" in the window function as it has been defined as "TRUNC(CD.date)" in the first result column.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Juanma Menendez
Solution 2 Bill Weiner

Related Questions