How To Use a Local style sheet file with Calyspo Wordpress

Question

I'm trying to learn about the Wordpress Calyspo architecture. I've successfully created their example "Hello World" page using these instructions .

Now I'd like to continue past the example and add a style. I've read these instructions and created a local style.scss file in the same folder as main.jsx per the instructions:

Take a component called site/index.jsx that renders a site item on the picker. Imagine we are going to set the color for the site title to #333 and change it to #444 when the site is a Jetpack site. Our Sass file will sit alongside site/index.jsx and be called site/style.scss.

The one style in this file is very straightforward:

.hello-world__title {
    background-color: blue;
    border: 1px red solid;
}

The element (as rendered in the browser's dev tools) is correct:

<h1 class="hello-world__title">Hello, World!</h1>

I'm not getting errors from WebPack. When I update the style.scss file, I see messages indicating the public .scss files and .map file have been updated:

Rendering Complete, saving .css file...
Wrote CSS to /home/rich/dev/projects/wp-calypso/public/editor.css
Rendering Complete, saving .css file...
Wrote CSS to /home/rich/dev/projects/wp-calypso/public/style.css
Rendering Complete, saving .css file...
Wrote CSS to /home/rich/dev/projects/wp-calypso/public/style-debug.css
Wrote Source Map to /home/rich/dev/projects/wp-calypso/public/styledebug.css.map

I see no references to my new style in any of these files.

I wonder if I'm missing a step somewhere, like an entry in a mapping file or something.

BTW - I'm also very new to Reactjs and SASS. I'll happily post any other info that will help solve this issue.

Answer 1

Yes, you missed the last step: import the component's style - file style.scss into assets/stylesheets/_components.scss then your styles will be generated in style.css .

This step is mentioned here: Calypso's CSS/Sass Coding Guidelines

The answer might be too late and you might already know how to do it now. I just cloned wp-calypso yesterday :)