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
15
votes
1 answer

Conditional Import based on environment variable

I have a react component which has X options for a stylesheet to be imported which is using CSS Modules. I ideally want to have a global environment variable fetched by using e.g. process.env.THEME I can't use: import MyStyleSheet from…
Flakx
  • 1,092
  • 3
  • 15
  • 25
14
votes
6 answers

React, Emmet, Visual Studio Code, and CSS-Modules

Is there a way to configure emmet in visual studio code to use React's CSS modules? When I type... div.container and hit tab, it becomes
The problem here is that it's not using CSS Modules. I'd like it to become…
MattEnth
  • 843
  • 1
  • 7
  • 19
14
votes
4 answers

Flow module not found with .scss file

I have a file using scss with css-modules like so: import styles from './Login.scss'; The webpack build works fine but i'm getting a flow error: Required Module Not Found In my .flowconfig I have…
john_ryan
  • 1,557
  • 1
  • 16
  • 34
14
votes
1 answer

ReactCSSTransitionGroup with CSS Modules

I have a ReactCSSTransitionGroup I'm using with CSS Modules (and dynamic routing from react-router but I believe this is working as expected).
Toby
  • 12,743
  • 8
  • 43
  • 75
13
votes
1 answer

Gatsby - Warn Attempted import error: 'css' does not contain a default export (imported as 'styles')

I Was beginning with Gatsby, and in my app, when I run the command 'gatsby develop', I got this warning in terminal: warn Attempted import error: '../styles/home.module.css' does not contain a default export (imported as 'styles'). And then, when…
Lins
  • 141
  • 1
  • 7
13
votes
1 answer

How to use a global parent selector with CSS Modules

I'm using CSS Modules within a React application. I also have a dropdown component with some global styles (which I'm happy with, as the general styles I want to re-use). When the dropdown is active, a CSS class is applied (.dropdown--active). Is…
CherryFlavourPez
  • 7,529
  • 5
  • 45
  • 47
12
votes
4 answers

How to hash CSS class names in Nextjs?

How can I edit localIdentName field of css-loader in Webpack configuration in Nextjs so that I can hash/hide/obfuscate css class names? The example below is from the New York Times. Note the class names:
user9408899
  • 4,202
  • 3
  • 19
  • 32
12
votes
2 answers

Controlling the specificity of CSS Modules in a Next.js App

I'm trying to figure out a good workflow of how to use Tailwind together with CSS Modules in Next.js, but I'm running into some tricky problems regarding specificity and the order in which styles are inserted by Webpack. Consider the following use…
Mark Kvetny
  • 664
  • 6
  • 19
12
votes
2 answers

How to detect unused css-modules classes

Does anyone know any tool which would help to highlight classes that are not used in css-modules? Recently I have added typescript-plugin-css-modules to my project which helps me to detect if I use non existent class names in JSX, but now I also…
Edvards Niedre
  • 620
  • 1
  • 6
  • 20
12
votes
1 answer

Dealing with stylesheet order and css module className overrides

I have a component that has its own style, e.g. .prompt { color: red; } It's declared as so: import cn from 'classnames'; import styles from './styles.css'; const MyComponent = ({className}) => { return (
Chris
  • 27,596
  • 25
  • 124
  • 225
12
votes
2 answers

Tilde in url with css modules does not work

Do you have some example config that works? setting for webpack: { test: /\.scss$/, use: ['style-loader', { loader: 'css-loader', options: { modules: true, localIdentName: '[local]--[hash:base64:5]', }, },…
rofrol
  • 14,438
  • 7
  • 79
  • 77
12
votes
1 answer

Better way of applying css-modules to AngularJS

I'm using css-modules with AngularJS 1.5 components now. The stack is webpack + css-loader?modules=true + angular 1.5 components + pug. Currently I have to do the following steps to use css modules in my pug template. // my-component.js import…
charlee
  • 1,309
  • 1
  • 11
  • 22
12
votes
2 answers

How to get sourcemaps working for React Css Modules?

I'm trying to setup a React project with react-css-modules, webpack and Hot Module Replacement. Everything is working like a charm but I can't get the CSS sourcemaps to work. I followed this guide to make HMR work. It involves a BrowserSync setup to…
Tieme
  • 62,602
  • 20
  • 102
  • 156
12
votes
3 answers

Using css modules how do I define a global class

I am using css modules, however a library I use in a component to append tweets with JavaScript adds some elements to my component in the following structure:
I want to now style these elements in…
Navela
  • 1,803
  • 3
  • 11
  • 8
11
votes
2 answers

Changing the CSS for a React component has effect on all other pages

I have a React component with the following files: src/components/HomePage/index.js src/components/HomePage/style.scss The component is very simple: import React from 'react'; import './style.scss'; const HomePage = () => { return ( …
MSOACC
  • 3,074
  • 2
  • 29
  • 50
1 2
3
…
48 49