How to use @apply in a react component with css modules

Question

I've got this in a global style.css:

:root {
    --font: {
        font-family: "Source Sans Pro", sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

... and this in a react component's style.css:

.rightnav {
    @apply --font;
    float: right;
    color: white;
}

In the component itself:

import React from "react"
import cssModules from "react-css-modules"
import style from "./style.css"

render() {
  return (
        <ul>
          <li className={style.rightnav}>Blog</li>
        </ul>
  )
}

I get an error: No custom properties set declared for font.

Pascal Duez · Accepted Answer · 2016-10-17 23:56:52Z

1

You've got to import the global stylesheet into the local one. Because postcss-apply has no way to know about that global file while parsing the local one. So it's a good idea to have a partial with only custom properties and custom property sets declarations.

You probably want something like postcss-import

@import 'path/to/variables.css';

.rightnav {
  @apply --font;
  float: right;
  color: white;
}

answered Oct 17, 2016 at 23:56

Pascal Duez

7115 silver badges7 bronze badges

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

1 Comment

Alasdair McLeay Over a year ago

If any classes or element styles were defined in the file you want to import variables from, this technique would also duplicate those classes/element styles. Would be good if there was a way to only import the css properties set that you need rather than importing the whole file, but I haven't found a way yet...

Collectives™ on Stack Overflow

How to use @apply in a react component with css modules

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related