Question

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

现在我想继续通过示例并添加一个样式。我已经阅读了这些instructions，并根据说明在与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也很新。我很乐意发布任何其他有助于解决此问题的信息。

Answer 1

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

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

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

如何使用Calyspo Wordpress

1 个答案: