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
4 answers

Making customizable css properties with React and CSS Modules/PostCSS

I'm trying to make a library of react components that's external to an application. This will be an npm module, loaded with Webpack. I'm styling the component using CSS Modules, and I'm trying to see how to make some of its properties customizable.…
Pablo Barría Urenda
  • 5,703
  • 5
  • 20
  • 32
0
votes
3 answers

react reference stylesheet in css module

I have the following .scss file div.topMenuIndex { ul { &:before { content: "☰"; padding: .15em .25em; text-align: center; background: #ea764b; color: #f8d4c6; } &.LoginStatus{ background: azure; …
tmp dev
  • 8,043
  • 16
  • 53
  • 108
0
votes
1 answer

Angular 2 css modules

I tried use @Component({ selector: 'about', template: './about.hmtl', styles: ['.block {background-color: red} ...'] // <-- This will generate css modules }) This works fine, angular expands every class with attribute selector and give every…
Roma Baida
  • 3
  • 2
0
votes
0 answers

Include old CSS file in webpack

I am migrating an old Angular app to React, so there is already the old build process with gulp that generates a CSS file. For React components I am using CSS modules, and Webpack is generating another CSS file. Finally using gulp I am concatenating…
Avraam Mavridis
  • 8,698
  • 19
  • 79
  • 133
0
votes
1 answer

React components styling dilemma

I start making new project using React and Redux. I'm new to React and not sure about what kind of styling mehtod I should use. Apparently I want to use the one that will not decrease performance, give all features of CSS3, and be maintainable. So…
Sanzhar Dan
  • 351
  • 4
  • 11
0
votes
1 answer

How to target CSS module classes after they are hashed?

I'm working in react and have an element that uses CSS modules for styling, like so:
Title: {book.title}
Because class names are hashed, the compiled output is something like:
dace
  • 5,819
  • 13
  • 44
  • 74
0
votes
0 answers

Sublime Text 3 CSS Modules - correct syntax for 'composes' but semicolon is highlighted

I am using the CSS Modules composes: selector in ST3 but I can't figure out how to remove the pink highlighting from the semicolon. Any help would be appreciated.
davidatthepark
  • 1,235
  • 1
  • 13
  • 25
0
votes
2 answers

Export from "main" must be a function that returns an HTML string

I was following every step from this article about Static Site Generator https://css-tricks.com/css-modules-part-3-react/. The only thing i change from that article is the setting for .babelrc . On presets i use es2015 instead of es2016 and it looks…
Wahyu Haryanto
  • 13
  • 4
0
votes
0 answers

How do I compile "styleName" into two separate classes?

So, I use CSS Modules webpack loader: css?modules&importLoaders=1&localIdentName=[path]_[name]_[local]_[hash:base64:5] I want to compile each styleName property to not only the generic class name usually generated but also to another simpler…
Vitali Zaidman
  • 899
  • 1
  • 9
  • 24
0
votes
3 answers

css modules object import returns empty

I am trying to use css modules inside react, but it is not working. The log of this code: import React from 'react' import styles from '../../css/test.css' class Test extends React.Component { render() { console.log(styles) …
Alessander França
  • 2,697
  • 2
  • 29
  • 52
0
votes
1 answer

Mix css modules classes and boostrap active

In a project I am working on we use css modules with postcss (also postcss-cssnext and postcss-include). We also have bootstrap as a dependency which is globally provided. In a given component I do have a custom class for a button. So my button has…
George Karanikas
  • 1,244
  • 1
  • 12
  • 38
0
votes
0 answers

How to set up css modules with sass and ExtractTextPlugin at webpack

I am trying to use css modules at webpack but it is not working. My webpack is: var path = require('path') var webpack = require('webpack') var HappyPack = require('happypack') var BundleTracker = require('webpack-bundle-tracker') var path =…
Alessander França
  • 2,697
  • 2
  • 29
  • 52
0
votes
1 answer

How can I use :global css classes - css modules

I'm using css modules for my reactjs project. Here is my file where I'm trying to use global css classes:
Hello World
Here is my styles.css :global{ .site-wrapper { …
John Mcculley
  • 11
  • 1
  • 6
0
votes
2 answers

CSS Modules: Best practice combining classnames?

I'm using css-modules in a ReactJS app I'm developing.
home
about
if I need to have a class for all menu divs (home, about) and also specific class for…
Pouya Sanooei
  • 1,012
  • 1
  • 13
  • 22
0
votes
2 answers

How to use CSS Modules with webpack in React isomorphic app?

I am build an isomorphic app using react, react-router, express and webpack. Now I want to use css modules to import css. I use import './index.css' in index.jsx, it works fine on client, but doesn't work on server rendering. The error is Error:…
Brick Yang
  • 5,388
  • 8
  • 34
  • 45
1 2 3
…
48
49