using css modules, how can I import classes from a file

Question

I am using css modules for my project, and I have a file positioning.css which has some useful classes that I want to import. e.g. .right, .left

What is the best approach for this using CSS Modules?

At the moment I can see 2 options, but they are not all that great:

composition in the component's style

.right {
    composes: right from '../styles/positioning.css';
}

or

multiple css module imports in the component

import positioning from '../styles/positioning.css'
import styles from './myComponent.css';
Object.assign(styles, positioning)

class Menu extends Component {

  render() {

    return (
      <div styleName='menu'>
        <div styleName='left'>this is left</div>
        <div styleName='right'>this is right</div>
      </div>
    );
  }
};

export default CSSModules(Menu, styles);

Are you using webpack? If so there is a css loader that allows you to import css files directly like packages: github.com/webpack-contrib/css-loader — SomethingOn
– SomethingOn, Commented Aug 22, 2017 at 18:00
I usually make a globals.scss file that has non-component specific classes, and reference them by strings. — Andy Ray
– Andy Ray, Commented Nov 1, 2017 at 21:47

T04435 · Accepted Answer · 2020-01-09 03:00:03Z

10

I have manage to get this working:

// css file
@value class-to-compose from "file-where-class-is-defined.css";

.someclass {
  composes: class-to-compose;
  // other styles
}

answered Jan 9, 2020 at 3:00

T04435

14.3k5 gold badges60 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muhammad Adeel · Accepted Answer · 2017-11-01 21:35:06Z

3

One approach is to collect all app level css variables and calculations at the top level into app.css

@import "./theme/layout.css";
@import "./theme/colors.css";
...

Then reference app.css using

@import "../../app.css";

This way you can manage @import scope inside one file at the root level.

answered Nov 1, 2017 at 21:35

Muhammad Adeel

2,8841 gold badge24 silver badges18 bronze badges

Comments

Cahnory · Accepted Answer · 2015-12-23 15:33:55Z

0

I'll go with the first proposition. (the result is quiet the same)

both proposition have quiet the same result
If someday you have to edit your Menu css, you'll just have to edit your Menu css and not your component.
You let CSSModules take decisions. (more futur proof?)

answered Dec 23, 2015 at 15:33

Cahnory

111 bronze badge

Comments

Yo Wakita · Accepted Answer · 2016-04-21 19:49:46Z

0

You could import the css files that you use frequently into a broader CSS file that you import on specific pages, this is taking the second approach but making it cleaner, especially if you have a lot of common core css files that you import on pretty much all pages.

answered Apr 21, 2016 at 19:49

Yo Wakita

5,4803 gold badges26 silver badges36 bronze badges

Comments

Fabian Bosler · Accepted Answer · 2017-05-14 14:35:35Z

0

I would advise you to go with [Sass] [1]. Sass allows for the usage of partials (i.e. distributed / scoped css sheets).

You write scoped (to the components you want) css and import all your partials into your main.css then.

Couple of other advantages:

you can do theming by having one partial that defines your them via variables, which you import first and then all your partials can use these variables.
having the css on a scoped level (at least to me) felt more "reactish" where components are supposed to be stand alone, but it also wasn't inline styling, which I find ugly and weird (I don't like to clutter down my .js files with styles)

[1] http://sass-lang.com/

answered May 14, 2017 at 14:35

Fabian Bosler

2,5002 gold badges33 silver badges61 bronze badges

2 Comments

Fabian Bosler Over a year ago

your link is dead :)

svnm Over a year ago

I would recommend styled-components instead of sass

Pang · Accepted Answer · 2017-07-05 11:03:22Z

0

I find this one line very helpful with importing:

@import 'file.css';

edited Jul 5, 2017 at 11:03

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Jul 5, 2017 at 10:45

sue2kittie

12 bronze badges

Comments

ss1080 · Accepted Answer · 2017-09-27 14:03:03Z

0

You could set these as globals and update their names to be a tad more semantic, like BootStraps pull-right.

If you declare them as

:global(.right) {
    /* ... */
}

You can then just use them in your app by preferably importing globals early on in the entry point.

answered Sep 27, 2017 at 14:03

ss1080

411 silver badge3 bronze badges

Comments

Nico_ · Accepted Answer · 2021-02-23 15:47:55Z

0

You should take a look at the option by vue.js component (scoped/overall)
You can choose a precompile css language like SASS, which can use @extend ...etc to reuse the common property, like below:
```
 %common {
   width: 100%;
   height: inherit;
 }

 .my-class {
   @extend %common;
 }
```

edited Feb 23, 2021 at 15:47

Nico_

1,39617 silver badges32 bronze badges

answered May 29, 2017 at 4:50

Mahoon Alex

12 bronze badges

Collectives™ on Stack Overflow

using css modules, how can I import classes from a file

8 Answers 8

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related