如何在中使用本地样式表文件

Question

我试着学习Wordpress Calyspo的建筑。我已经成功地使用这些指示创建了他们的示例"Hello“页面。

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

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

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

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

元素(如浏览器的dev工具中所呈现的)是正确的：

<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

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

我想知道我是不是遗漏了一个步骤，比如映射文件中的条目之类的。

顺便说一句，我对反应和沙司也很陌生。我会很高兴地发布任何其他信息，以帮助解决这个问题。

Answer 1

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

这里提到了这个步骤:卡利普索的CSS/Sass编码准则

答案可能太迟了，你现在可能已经知道该怎么做了。我昨天刚克隆了可湿性粉剂-桉树 :)