Stack Overflow
Stack Overflow

Questions tagged [css-modules]

CSS Modules is a pre-processor that allows for emulation of local scope and control dependencies in CSS code.

CSS Modules is a CSS pre-processor that allows for scoping of CSS classes in a local or global context. It works in tandem with JavaScript to generate CSS classes, and requires a loader (such as Webpack or Browserify).

Read the documentation for CSS Modules here.

730 questions
233
votes
22 answers

Can't import CSS/SCSS modules. TypeScript says "Cannot Find Module"

I'm trying to import a theme from a CSS module but TypeScript gives me a "Cannot Find Module" error and the theme isn't applied on runtime. I think there's something wrong with my Webpack config but I'm not sure where the problem is. I'm using the…
zakdances
  • 22,285
  • 32
  • 102
  • 173
130
votes
3 answers

What does :global (colon global) do?

In some SCSS files, I see the following: :global { /* ... */ } I don't know if it is an SCSS feature or a CSS feature. I tried searching about it but couldn't find any good results at first sight.
wellbeck190
  • 1,421
  • 2
  • 8
  • 5
121
votes
7 answers

How to apply global styles with CSS modules in a react app?

I'm currently using CSS Modules with React for my styling. So each of my components is importing in it's component specific css file, like so: import React from 'react'; import styles from './App.css'; const example = () => (
dace
  • 5,819
  • 13
  • 44
  • 74
101
votes
9 answers

How to import CSS modules with Typescript, React and Webpack

How to import CSS modules in Typescript with Webpack? Generate (or auto-generate) .d.ts files for CSS? And use classic Typescript import statement? With ./styles.css.d.ts: import * as styles from './styles.css' Import using require Webpack…
Diego Laciar
  • 2,898
  • 3
  • 14
  • 8
59
votes
6 answers

How to nest classes in css modules and react?

I am trying to use CSS Modules in my React project. First part of the problem is that if I write nested css classes (using sass), I don't know if I can access the inner ones, since those seems to be compiled into unique classnames as well. Some…
rablentain
  • 6,641
  • 13
  • 50
  • 91
51
votes
11 answers

How to use css modules with create-react-app?

According to a tweet by Dan Abramov, CSS modules support is there in create-react-app (CRA). One just needs to give extension of module.css to his stylesheets to enable the feature, but this is not working with me. I am having version 1.1.4 of…
Muhammad Saqib
  • 1,037
  • 3
  • 10
  • 16
51
votes
11 answers

Multiple classNames with CSS Modules and React

I'm using the following code to dynamically set a className in a React component based upon a boolean from props:
...
However, I'm also using CSS Modules, so now I need to set the…
Toby
  • 12,743
  • 8
  • 43
  • 75
45
votes
1 answer

Sass with CSS Modules & Webpack

I've been building a project for a while using Webpack, Sass, and CSS modules. Normally in my .scss files, I define a class like: :local(.button) { color: white; } and in my React components, in the render method, I require the styles: render…
barndog
  • 6,975
  • 8
  • 53
  • 105
36
votes
10 answers

How can I style react-datepicker?

I'm using webpack, react-datepicker and have managed to import its css with the provided css module. import 'react-datepicker/dist/react-datepicker-cssmodules.css The component looks fine and dandy, but now I want to make it full width like the…
Sebastian Patten
  • 7,157
  • 4
  • 45
  • 51
34
votes
4 answers

How to use global variables in CSS-Modules?

I'm busy learning React with CSS-Modules and I don't quite understand how one would store variables? For example, in Sass you're able to do this: // _variables.scss $primary-color: #f1f1f1; // heading.scss @import './variables'; .heading { …
user818700
32
votes
7 answers

How to configure Next.js with Antd / Less and Sass / CSS modules

I want to use Next.js with Sass and CSS modules but also want to use Ant Design and wanted to use the Less styles for smaller building size. I'm able to enable either CSS modules or Less loader but not both at the same time. The examples from…
JustTB
  • 819
  • 1
  • 8
  • 11
31
votes
6 answers

CSS Modules, React and Overriding CSS Classes

I am using a React component library (React Toolbox), which is outputting this class in their Tab component using CSS Modules and Webpack: label___1nGy active___1Jur tab___Le7N The tab is a className prop I am passing down. The label and active…
Joe Bruno
  • 417
  • 1
  • 4
  • 11
30
votes
5 answers

Selector ":global .class" is not pure (pure selectors must contain at least one local class or id)

I am using css modules with Sass in next.js and I got this error :global { .slick-track { display: flex; // Syntax error: Selector ":global .slick-track" is not pure (pure selectors must contain at least one local class or id) …
legenddaniel
  • 698
  • 2
  • 9
  • 17
27
votes
3 answers

tailwind css with css modules in next.js

How to config next.js to support Simultaneous tailwind css with css modules? I want tailwindcss wrap whole project: // /tailwind.scss :global { @import "tailwindcss/base"; @import "tailwindcss/components"; @import…
Masih Jahangiri
  • 9,489
  • 3
  • 45
  • 51
26
votes
4 answers

Workaround to add className to Fragment in React

I am trying to create a stateless component in React with the sole purpose of acting as a reusable wrapper. I am also using CSS Modules because I want to have fully modular CSS. The thing is I don't want to add unnecessary elements (and even more so…
NTP
  • 361
  • 1
  • 3
  • 11
1
2 3
…
48 49