Incorporating global stylesheets alongside CSS Modules

Question

Incorporating global stylesheets alongside CSS Modules

Currently, I am utilizing the react boilerplate for my project. This boilerplate makes use of CSS Modules and postCSS for styling, which I find to be quite beneficial. However, I also require some global CSS files for typography, base components, and more. What would be the most recommended approach for incorporating these global styles? I have considered using preCSS, but I am unsure about the setup process in webpack to import these global files into the main stylesheet. My background is more Gulp/Grunt based and I work with Sass, so I am relatively new to webpack. Any guidance in this regard would be highly appreciated.

Additionally, it would be advantageous if I could utilize the variables and mixins defined in these global files within the CSS module files. Is this even feasible or advisable? To facilitate this, I have installed react-css-modules so that I can make use of styleName for referring to the CSS Module file and className for accessing the global CSS classes.

I am aware of the

composes: class from '/path/to/file.css';

attribute, but I would prefer having specific global files where utility classes like clearfix and error classes are defined. By employing react-css-modules, the implementation might look something similar to the following:

<div className="clearfix" styleName="app-header">{...}</div>

However, I am uncertain if this is the correct approach. As I am contributing to an open-source project, I strive to adhere to best practices and ensure that the implementation is of the highest standard possible. I appreciate any advice provided on this matter! Thank you.

css reactjs webpack postcss css-modules

Answer 1

Answer №1

Using css-modules, you have access to the :global feature which allows you to import CSS files locally in your code but have them applied globally throughout the application.

Answer 2

Using css-modules, you have access to the :global feature which allows you to import CSS files locally in your code but have them applied globally throughout the application.

Answer 3

Answer №2

When I encountered a challenge trying to use a third-party library that needed certain css files directly referenced in the js templates through class name strings, and css modules were not supported, I had to find a solution. Instead of altering the css files by adding a global modifier, which could lead to complications if they changed in the future, I discovered a mode setting in the css-loader that allowed me to preserve the original names for specific files.

Here's how it functions:

The mode setting in the css-loader, alongside other options, includes a function parameter. This function takes a resourcePath as input and returns either local, global, or pure values. Using 'global' retains the original names from the source file, while 'local' applies standard hashing. This feature proves useful for integrating third-party libraries that are incompatible with css modules.

To address this issue, I devised a simple function to inspect the resourcePath for modules requiring global retention. While effective, this approach does mean writing the function twice for development and production configurations.

Below is an example configuration for the development environment:

{
    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'
            }
        },
    }
}

Detailed documentation on the mode function can be accessed at: https://github.com/webpack-contrib/css-loader#function-3

Answer 4

When I encountered a challenge trying to use a third-party library that needed certain css files directly referenced in the js templates through class name strings, and css modules were not supported, I had to find a solution. Instead of altering the css files by adding a global modifier, which could lead to complications if they changed in the future, I discovered a mode setting in the css-loader that allowed me to preserve the original names for specific files.

Here's how it functions:

The mode setting in the css-loader, alongside other options, includes a function parameter. This function takes a resourcePath as input and returns either local, global, or pure values. Using 'global' retains the original names from the source file, while 'local' applies standard hashing. This feature proves useful for integrating third-party libraries that are incompatible with css modules.

To address this issue, I devised a simple function to inspect the resourcePath for modules requiring global retention. While effective, this approach does mean writing the function twice for development and production configurations.

Below is an example configuration for the development environment:

{
    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'
            }
        },
    }
}

Detailed documentation on the mode function can be accessed at: https://github.com/webpack-contrib/css-loader#function-3

Incorporating global stylesheets alongside CSS Modules

Answer №1

Answer №2

Similar questions

What's the optimal method for displaying a component with an onClick event in React?

Calculating the computed width based on flex-basis at 0% and the flex-grow factor: what's the deal

Incorrect legend colors in Highcharts pie chart

Ways to hide the value from being shown

Customize MUI datagrid by highlighting specific rows with bold text

Strange Behavior: Material-UI Dialog Closes Unexpectedly on iPhone due to Phantom topClick Events

The continuous loop caused by useEffect baffles me as I struggle to comprehend its workings entirely

What is the best way to incorporate a video into a ReactJs project?

Updating state in React Textarea is not possible

Alert: Error encountered while attempting to locate the Angular Material core theme within Angular 3, Angular Material, and Angular Material Experimental

Comparing Embedded and Linked JS/CSS

What's the best way to adjust the alignment of these elements?

Is there a way to customize Material UI theme types and make adjustments to existing types using Typescript?

Unable to save images in API using POST method in React Native for Android

Ways to extract subarray elements that meet a certain condition and break out of the loop

React Native Error - Node not found in an unrendered component

Modify the card design when the screen is reduced in size and when the workspace is comprised of only two words

What could be causing my div to overflow its parent div when the screen size is adjusted?

React allows for items to be exchanged between two lists

Creating a vertical line in HTML: A step-by-step guide