0

Wordpress Calyspo アーキテクチャについて学習しようとしています。これらの手順を使用して、サンプルの「Hello World」ページを正常に作成しました。

ここで、例を超えて続行し、スタイルを追加したいと思います。これらの手順を読み、手順に従ってmain.jsx と同じフォルダーにローカルのstyle.scssファイルを作成しました。

ピッカーでサイト アイテムをレンダリングする site/index.jsx というコンポーネントを取り上げます。サイト タイトルの色を #333 に設定し、サイトが Jetpack サイトの場合は #444 に変更するとします。Sass ファイルは、site/index.jsx と並んで配置され、site/style.scss という名前になります。

このファイルの 1 つのスタイルは非常に単純です。

.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 のCSS/Sass コーディング ガイドラインを参照してください。

答えは手遅れかもしれませんが、あなたはすでにその方法を知っているかもしれません。昨日wp-calypsoのクローンを作成しました:)

于 2017-01-11T10:25:39.817 に答える