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

Does react-script-ts support create-react-app and CSS/SCSS Modules?

Now that create-react-app has released v2, I want to create a new React App using Typescript and SCSSModules or CSSModules? Am wondering if anyone managed to make this work? I am getting a Cannot find module ./Styles.module.scss when I import styles…
cipacda
  • 154
  • 8
0
votes
1 answer

How to import existing stylesheet as CSS module using Webpack / create-react-app

Background: I'm building a Wordpress plugin (to be installed in multiple Wordpress instances) using React. The Wordpress instances may have different themes/custom stylesheets installed. The plugin registers a shortcode with React; A post in…
eddiewould
  • 1,555
  • 16
  • 36
0
votes
1 answer

CSS Modules not working with 3rd party package react-spinkit

I am trying to utilize the react-spinkit package for my React.js web application. Within this application I have opted to use CSS modules. When I made the switch to CSS modules, I noticed that the spinner component that I created was not rendering.…
Doctor J
  • 27
  • 1
  • 7
0
votes
2 answers

React and CSS Styling

In my page, I have to use two react components Component1 and Component2 Page1 code All the styling for components would come from the component CSS files. But for the page layout, I have page1.css I would write…
Geeky
  • 7,420
  • 2
  • 24
  • 50
0
votes
0 answers

Reactstrap with CSS Modules

I need to interconnect CSS modules and Reactstrap. I found different solutions, but they were all far from ideal. Maybe someone knows an elegant solution and can offer? The problem lies in the fact that Reactstrap provides ready-made components…
FrankStar
  • 1
0
votes
2 answers

Typescript and CSS-modules types

I want to use not a dumb mock for CSS modules but real types so I use webpack plugin typings-for-css-modules-loader for simple css .foo { color: red; } .bar { color: green; } it can generate example.css.d.ts declaration export interface ILocals { …
Vadim
  • 3,474
  • 3
  • 14
  • 21
0
votes
1 answer

Some of CSS modules styles are not being applied

I have a hard time applying one of my CSS rules using CSS modules. Here is React code and CSS styles. All rules are working except the active class when applied to anchor. I have tried different names, different selectors, but I can't make it work…
Matus Dubrava
  • 13,637
  • 2
  • 38
  • 54
0
votes
1 answer

CSS Modules, Composition in nested class

I am working on a project where there is a main style.scss file for a number of components. I want to restructure the code so as every component has its own folder (index.js, styles.scss). There is a nested class that is using a class from another…
slwjc
  • 27
  • 7
0
votes
1 answer

Error using mismatched PostCSS dependencies

Anyone know how to get composes working in gatsby css modules. I've tried using. .dog { composes: dog from "styles/common.scss" } I get this error. Your current PostCSS version is 5.2.18, but postcss-nesting uses 6.0.23. Perhaps this is the…
me-me
  • 5,139
  • 13
  • 50
  • 91
0
votes
0 answers

Is that possible to use style-loader and MiniExtractCssPlugin side by side in webpack bundling?

I'm currently creating components library with Webpack. I wan't my components library provides: React components: It can be used as reusable React components that contain bundled javascript and CSS module CSS components: It can be used in plain…
Samblekuh
  • 1
0
votes
4 answers

CSS module `:hover .child` not working

I have the following scss: .skillBox { position: relative; border-radius: 10px; border: 1px solid #ccc; box-shadow: 0 2px 20px #ccc; padding: 1em; &:hover { padding: 3em; .d-none { display: inline-block !important; } …
resting
  • 16,287
  • 16
  • 59
  • 90
0
votes
1 answer

How to differentiate two different CSS props to be conditionally styled, that have the same name in React Native?

I have this style: and this switch case: let backgroundColor = "white"; switch (this._getName()) { case "bot": backgroundColor = "#F6F9FC"; …
Esteban Vargas
  • 512
  • 1
  • 6
  • 24
0
votes
1 answer

Relative path in background url doesn't work when use css-modules

I use react-react-app. I set url: false, and enable css-modules. webpack.gonfig.dev.js(module/ rules): { test: /\.css$/, use: [ require.resolve("style-loader"), { loader:…
Angelki
  • 103
  • 8
0
votes
2 answers

How can I use the css file from react-table in my react project along with css modules?

I have been using css modules in my react project, and recently installed react-table using THIS SITE, but I'm having problem importing its css file. The source of react-table says I need to import the css file from react-modules like: import…
brainoverflow
  • 691
  • 2
  • 9
  • 22
0
votes
3 answers

Webpack removes css from .jsx files?

I have webpack file that looks like this (note - for now - I need to create both minified and not minified versions of assets - so this is not a mistake): const path = require('path'); const webpack = require("webpack"); const ExtractTextPlugin =…
Wordpressor
  • 7,173
  • 23
  • 69
  • 108
1 2 3
…
48 49