Preact-cli: CSS classes don't work

Created on 9 Sep 2018 · 1Comment · Source: preactjs/preact-cli

Do you want to request a feature or report a bug?
Bug

What is the current behaviour?
When using CSS classes

If the current behaviour is a bug, please provide the steps to reproduce.

preact create widget project
Go to the /components/hello-world/style.scss and add a class .test { background-color: #000;}
Add the className='test' to the parent widget.
Run the app and the background color will be white.

What is the expected behaviour?
The div should be black. Apparently the builder does not inject the sanitized class names (In my case .test became .test_95fc yet it doesn't inject that updated class name into the div.)

question

Source

biznickman

Most helpful comment

You must import the stylesheet within your JS file and reference it by name. Please look within here for an example.

.test {
  background: #000;
}

import style from './index.css';

export default function (props) {
  return (
    <div class={ style.test }>
      I will have black background
    </div>
  );
}

Hope that helps!

lukeed on 9 Sep 2018

👍2

>All comments

You must import the stylesheet within your JS file and reference it by name. Please look within here for an example.

.test {
  background: #000;
}

import style from './index.css';

export default function (props) {
  return (
    <div class={ style.test }>
      I will have black background
    </div>
  );
}

Hope that helps!

lukeed on 9 Sep 2018

👍2

Was this page helpful?

0 / 5 - 0 ratings