Using global css files with CSS Modules

Question

I'm using https://github.com/mxstbr/react-boilerplate for a project, which uses CSS Modules and postCSS for the styles, which is great. However, I also need to have some global CSS files for typography, base components, etc. What is the best practice for how these should be added in? I've looked at using preCSS but not entirely sure how to set it up within webpack, so that it can import these global files into the main stylesheet. I'm new to webpack (come from a Gulp/Grunt background, using Sass) so any help here would be much appreciated.

It would also be great if I could use the variables and mixins defined in these files in the CSS Module files, but unsure if this is possible or advised. I've installed react-css-modules so that I can use styleName to refer to the CSS Module file and className to refer to the global CSS classes.

I know there is the composes: class from '/path/to/file.css'; attribute but I would prefer to have some global files where various utility classes are defined, such as clearfix and error classes, etc. So using react-css-modules, it would look something like this: <div className="clearfix" styleName="app-header">{...}</div>

Again, not sure if this is correct.

I want to stick to best practices as I'm working on an open-source project and want it to be done in the best way possible. Thanks for any advice!

Damien Leroux · Accepted Answer · 2016-06-09 13:47:01Z

3

css-modules provides :global that can be used to include locally in your code css files that will included globally in application

answered Jun 9, 2016 at 13:47

Damien Leroux

11.8k7 gold badges46 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tom Oakley Over a year ago

Thanks Damien! So I use :global in any Module file, it will get included globally for use in any other module file? Does that include things like CSS variables as well?

Damien Leroux Over a year ago

Yes, it will get included globally for use in any other module file. It works for me. I can't say about CSS variables. Sorry

Esten Over a year ago

@Damien. I'm basically set up with the same tools as OP, but with GatsbyJS. Everything is working alright, but my only problem is that my module styles are getting added to the document before the global styles. I would expect module styles to override everything. Are you aware of any way to configure (style-loader?) to load the global styles first thing?

Vočko · Accepted Answer · 2021-12-14 00:48:42Z

I did come across this problem when I wanted to use a 3rd party library that requires some css files that are directly referenced in the js templates (by class name strings) and css modules were not supported. As I did not want to change the css files by adding :global modifier (because they are 3rd party and might change in the future), I've figure out there is a mode setting in the css-loader that you can use to preserve original names for certain files.

How it works:

There is a mode setting in the in the css-loader that (beside other options) accepts a function. It takes a resourcePath as an argument and returns values local, global and pure. Global keeps all the name as they were defined in the original file, while local uses standard hashing as defined. This is handy for third party libraries that don't work with css modules.

I've written a short function that checks the the resourcePath for modules that should stay global. Seems to work fine for me, the only disadvantage is that I have to write it twice (development and production setting).

Here is the development env example:

{
    loader: 'css-loader',
    options: {
        modules: {
            localIdentName: '[name]_[local]_[hash:base64:6]',
            exportLocalsConvention: 'camelCase',
            mode: (resourcePath) => {
                let globalStyles = ['module-to-stay-global-1', 'module-to-stay-global-2'];
                return globalStyles.some(globalFile => resourcePath.includes(globalFile)) ? 'global' : 'local'
            }
        },
    }
}

Documentation to the mode function can be found here: https://github.com/webpack-contrib/css-loader#function-3

Collectives™ on Stack Overflow

Using global css files with CSS Modules

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related