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

Use original className in console when using css modules

I am using babel-plugin-react-css-modules. This is my configuration isnide of webpack. devtool: 'source-map', { test: /\.local\.(css|scss)$/, use: [ 'style-loader', …
Igor-Vuk
  • 3,551
  • 7
  • 30
  • 65
0
votes
1 answer

Applying classes to d3 chart in react application using css modules

After much looking around, i had to ask this question. I have been using css modules in my react application. I decided to have a d3 component. However, after much research, I am still not able to find a way to load css classes to my d3 application.…
Omkar
  • 2,274
  • 6
  • 21
  • 34
0
votes
1 answer

CSS Modules don't return class

I would like to install css modules into create-react-app and I came across this https://github.com/kitze/custom-react-scripts. After setting things up, I created a test style.module.css file in my folder and import it with import styles from…
claireckc
  • 395
  • 2
  • 11
0
votes
1 answer

CSS Modules and multiple class names with tags

What do I do when I run across this?
If myClass was the only class I would import the relevant style sheet and do this:
This syntax does not work (not surprising) and I am not sure…
smuggledPancakes
  • 9,881
  • 20
  • 74
  • 113
0
votes
1 answer

Import variables into css module in React

I use CSS modules and my css/stylesheet files live next to my components. What is the fastest way to support a global colors file that can be imported into my stylesheet? Does my css-modules and webpack support this by default? Help.
user2355058
  • 211
  • 3
  • 15
0
votes
1 answer

CSS Modules Inheritance Image Height 100% Issue

For some reason, my images are being vertically distorted and I can't figure out as to why (See image below). 1 2 3 Long story short what I've done is moved all my single-page-app (SPA) app code/styles and created a server-side rendered codebase. I…
James LeBoeuf
  • 83
  • 1
  • 8
0
votes
1 answer

css modules not working even after ejecting create-react-app

I ejected my create-react-app in order to use css modules. I modified my webpack.config.dev.js from { test: /\.css$/, use: [ require.resolve('style-loader'), { loader:…
EdG
  • 2,243
  • 6
  • 48
  • 103
0
votes
1 answer

Use css modules on scss

Is it possible to use scss and css modules together. I have a react project and my css files are following scss. I want to use css modules on this project. Is it possible to use css modules on these scss styling? For example I have my css file like…
EdG
  • 2,243
  • 6
  • 48
  • 103
0
votes
1 answer

Correct argument list syntax for className and css modules using BEM

I am using React and a very simple CSS modules setup with webpack. Also using BEM for class names. Classnames with dashes are not valid unless in string form, and I have not yet found a string version that does not repeatedly reference the css…
user2355058
  • 211
  • 3
  • 15
0
votes
3 answers

Webpack scss & css modules react - unexpected token string

I'm trying to setup a project with react that uses a combination of scss (mixins, variables, etc) and css modules. However when I setup up webpack using style-loader, css-loader, postcss-loader, sass-loader, sass-resources-loader,…
themaster
  • 345
  • 6
  • 15
0
votes
2 answers

Enable Hot Reloading With Webpack and PostCSS

I am looking to hot reload my window when I save a stylesheet in my text editor. Currently, I have to manually reload the page to see any changes. Below is the snippet in my Webpack configuration file that handles processing css: module: { rules:…
iknowhtml
  • 17
  • 7
0
votes
1 answer

Webpack css modules only randomize class names in destructured imports

I'm using css modules + scss with a webpack config like this (added only the loader part the rest is pretty standard): module.exports = { module: { loaders: [ { test: /\.(scss|css)$/, loader: ExtractTextPlugin.extract({ …
Balázs Édes
  • 13,452
  • 6
  • 54
  • 89
0
votes
1 answer

Webpack Error: Module build failed: Error: Environment [object Object] not supported

I am getting a string of errors when I build a module with Webpack. I can't find any documentation to suggest what this error means. Webpack Error: Module build failed: Error: Environment [object Object] not supported One of the libs loaded by the…
Undistraction
  • 42,754
  • 56
  • 195
  • 331
0
votes
0 answers

CSS modules show random letters instead of className

The styles are applying correctly but I see the below when I inspect an element. Is there a configuration I need to do? BN
stackjlei
  • 9,485
  • 18
  • 65
  • 113
0
votes
2 answers

svg import in scss module file not found after webpack

I can't import background image through scss file in my react project using webpack. I followed all the recent advice on stackexchange but to no avail. I get this error message when I try to import images through either scss or css files: Module…
user3634772
  • 13
  • 1
  • 6
1 2 3
…
48 49