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.
