2016-09-09 2 views
0

Я пытаюсь узнать о архитектуре Wordpress Calyspo. Я успешно создал их страницу «Hello World», используя these instructions.Как использовать файл таблицы локального стиля с помощью Calyspo Wordpress

Теперь я хотел бы продолжить пример и добавить стиль. Я прочитал эти instructions и создал локальную style.scss файла в той же папке, что main.jsx согласно инструкциям:

Возьмите компонент, названный сайт/index.jsx, который визуализирует на сайте пункт на подборщика. Представьте, что мы собираемся установить цвет названия сайта на # 333 и изменить его на # 444, когда сайт является сайтом Jetpack. Наш файл Sass будет располагаться рядом с сайтом/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 

Я не вижу ссылок на мой новый стиль в любом из этих файлов.

Интересно, если я где-то упустил какой-то шаг, как запись в файле сопоставления или что-то в этом роде.

BTW - Я также очень знаком с Reactjs и SASS. Я с радостью опубликую любую другую информацию, которая поможет решить эту проблему.

ответ

1

Да, вы пропустили последний шаг: импортируйте стиль компонента - файл style.scss в assets/stylesheets/_components.scss, тогда ваши стили будут сгенерированы в style.css.

Этот шаг упоминается здесь: Калипсо CSS/Sass Coding Guidelines

Ответ может быть слишком поздно, и вы, возможно, уже знаете, как сделать это сейчас. Я только что клонировал wp-calypso вчера :)

Смежные вопросы