Skip to content

Mixing global CSS & CSS modules #634

Open
@BenMorel

Description

@BenMorel

I'd like to use CSS modules by default for all my SCSS code, but disable it for Bootstrap SCSS files.

Right now I have this setup:

Encore.configureCssLoader(options => {
    options.modules = true;
    options.camelCase = true;
})

It works fine, but if I import Bootstrap SCSS files in my project:

require('bootstrap/scss/bootstrap.scss');

It gets compiled to something like:

.container-fluid_14FwU { ... }
.row_12USl { ... }

i.e. Bootstrap gets modularized, instead of being considered global by default.

There have been extensive discussions about how to tackle this problem. A few suggestions seem to stand out of the crowd:

  • only use CSS modules for files ending with .module.css or .module.scss
  • use CSS modules for all project CSS/SCSS files, and don't use them for files in node_modules
  • configure the loader to use CSS modules or not by default, and allow overriding on import by using a suffix such as file.css?global or file.css?module

Is there a way to configure either of these behaviours with webpack-encore right now, and is one of them officially recommended?

The various suggestions in the above thread seem hard to implement with Encore at the moment, and I'd like to avoid having to configure webpack manually if I can.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions