0

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

现在我想继续过去的例子并添加一个样式。我已阅读这些说明并按照说明在与 main.jsx相同的文件夹中创建了一个本地style.scss文件：

使用一个名为 site/index.jsx 的组件，该组件在选取器上呈现站点项目。想象一下，当站点是 Jetpack 站点时，我们要将站点标题的颜色设置为 #333 并将其更改为 #444。我们的 Sass 文件将位于 site/index.jsx 旁边，名为 site/style.scss。

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

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

元素（在浏览器的开发工具中呈现）是正确的：

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

我没有收到来自 WebPack 的错误。当我更新 style.scss 文件时，我看到指示公共 .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 也很陌生。我很乐意发布任何其他有助于解决此问题的信息。

4

1 回答 1

1

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

这里提到了这一步：Calypso's CSS/Sass Coding Guidelines

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

于 2017-01-11T10:25:39.817 回答