css - 如何在 Calyspo Wordpress 中使用本地样式表文件

Question

我正在尝试了解 Wordpress Calyspo 架构。我已经使用 these instructions 成功创建了他们的示例“Hello World”页面.

现在我想继续这个例子并添加一个样式。我读过这些 instructions并根据说明在与 main.jsx 相同的文件夹中创建本地 style.scss 文件:

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.

此文件中的一种样式非常简单:

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

元素(在浏览器的开发工具中呈现)是正确的:

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

我没有收到来自 WebPack 的错误。当我更新 style.scss 文件时，我看到指示公共(public) .scss 文件和 .map 文件已更新的消息:

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

我在任何这些文件中都没有看到对我的新样式的引用。

我想知道我是否遗漏了某处步骤，例如映射文件中的条目或其他内容。

顺便说一句 - 我对 Reactjs 和 SASS 也很陌生。我很乐意发布有助于解决此问题的任何其他信息。

Answer 1

是的，您错过了最后一步:将组件的样式 - 文件 style.scss 导入 assets/stylesheets/_components.scss 然后您的样式将在 style.css.

这里提到了这一步:Calypso 的 CSS/Sass Coding Guidelines

答案可能为时已晚，您现在可能已经知道如何去做了。我刚刚克隆了 wp-calypso昨天:)