Отображение сайта локально и через сервер.

Привет, если кто поможет буду признателен)

Суть такова, (использую сасс и галп) когда проверяю через созданный локально сервер с отслеживанием изминений и когда просто открываю страницу (правой кнопкой - открыть с помощью), то они отображают сайт по разному. Все, что открыто с помощью сервера на всех сайтах отображается чуть иначе, чем если открыто просто с помощью правой кнопки, допустим ширина

меняется, точнее не ширина, а такст постяонно менятется, когда на сервере смотрю, то выглядит так как мне нужно, а когда локально открыт, то уже текст полностью не помещается. Это только один из примеров.

Вопрос в следующем, как с этим жить? Или что является правдой, а что нет? Так как когда поправки сделал для локально открытого сайта, то на сервере тот же параграф уже вмещает в строку уже больше текста. Я так понимаю он меняет размеры грифта. Но что является правильным отображением? Спасибо за внимание, надеюсь мысль понятно изложил)

Мысль то понятна, но здесь нужен код(ссылочка на репозиторий была бы кстати + содержимое gulpfile.js), если хотите, чтобы кто-то за вас разбирался, или инспектор (о нём вы не упомянули, возможно не используете), если хотите разобраться сами.

https://github.com/KRdoubleL/156895-sedona/tree/module8-task1

еще начал проверять все страницы и увидел, что стили не применялись к checkbox и radiobutton. Не понятно… Точнее в хроме эти кнопки работают, а в фаерфоксе и опере нет. А что за инспектор, если не секрет?) Хотел бы самому понимать, где, что спрятано.

Ошибка в файле https://github.com/KRdoubleL/156895-sedona/blob/master/sass/global/fonts.scss

В настоящее время указана следущая директива:

 src: url('../../fonts/ptsans.woff2') format('woff2'),
 url('../../fonts/ptsans.woff') format('woff');

Но файлы *.scss обрабатываются препроцессором и трансформируются в style.css файл, который живёт в папке css, и именно от неё браузер начинает отсчитывать относительный путь …/…/

В данном случае я бы советовал указать путь, используя следущую запись …/fonts/ptsans.woff2

Спасибо за помощь, а как быть, с тем, что не работают кнопки чекбокса и радиобаттон? Изменил их размеры сделал большими просто. В хроме работают, а в остальных браузерах нет (фаерфокс и опера), как с этим быть, можно как-то исправить, чтоб работали изменения в каждом браузере, если это возможно объяснить?) Или это можно сделать только заменой на картинку вместо стандартной кнопки?

Покажите, как кнопки должны выглядеть, чтобы было с чем сравнить.
P.S. Есть вопросы по вашему package.json. Почему там указаны не все зависимости?
Команда gulp style запустилась только с третьего раза, когда пришлось установить три недостающих плагина.

Ну чтоб я знал какие плагины там не установлены. А можно подсказать, что там нужно еще установить, что за 3 плагина? И тогда будет нормально все запускаться?
А картинки какие именно не важно, у меня в папке имг, там свг картинки лежат, но я их еще не подключал, суть в том, что я стандартные чекбокс и радиобатон, просто увеличил и все. Хром их показывает большими, а вот опера и фаерфокс показывает стандартные маленькие кнопки. Из того, что нашел в интернете, то это просто браузеры сами походу не отображают этого и единственный выход, поставить свои кастомные картинки вместо стандартных кнопок. Спасибо за помощь.

А как вы можете не знать содержание своего gulpfile? При попытке запуска сборки вашего проекта у себя я получила несколько сообщений об ошибках, в которых были указаны отсутствующие плагины (то есть в gulpfile задачи для них есть, а в package.json они не указаны как установленные). Это плагины:
gulp-rename
gulp-svgstore
gulp-svgmin

Да, используйте псевдоэлементы тогда.

Указанные плагины соответствуют свежей версии оригинального репозитория академии: package.json + gulpfile.json, обновлённой 27 дней назад.

Теже файлы у студента были форкнуты 2 месяца назад и стех пор не изменялись. Вероятно стоит сделать рассылку для всего потока с пояснениями как применить изменения из мастер репы.

У меня, кстати, всё завелось из коробки, но я zip качал

Вы master-версию скачали?

Ага. Но я по привычке.

Теперь понял где я ошибся

Спасибо за помощь, очень помогли! Вроде-бы теперь работает как и через localhost, так и локально открытый сайт. Установил плагины и вроде с ними чуток разобрался, были только моменты, в консоли писало:

npm ERR! extraneous, а так же npm ERR! invalid

npm ERR! invalid: browser-sync@2.18.13 D:\sedona\node_modules\browser-sync

npm ERR! extraneous: browser-sync-client@2.5.1 D:\sedona\node_modules\browser-sync-client
npm ERR! extraneous: browser-sync-ui@0.6.3 D:\sedona\node_modules\browser-sync-ui
npm ERR! extraneous: bs-recipes@1.3.4 D:\sedona\node_modules\bs-recipes
npm ERR! extraneous: chokidar@1.7.0 D:\sedona\node_modules\chokidar
npm ERR! extraneous: connect@3.5.0 D:\sedona\node_modules\connect
npm ERR! extraneous: dev-ip@1.0.1 D:\sedona\node_modules\dev-ip
npm ERR! extraneous: easy-extender@2.3.2 D:\sedona\node_modules\easy-extender
npm ERR! extraneous: eazy-logger@3.0.2 D:\sedona\node_modules\eazy-logger
npm ERR! extraneous: emitter-steward@1.0.0 D:\sedona\node_modules\emitter-steward
npm ERR! extraneous: fs-extra@3.0.1 D:\sedona\node_modules\fs-extra
npm ERR! extraneous: http-proxy@1.15.2 D:\sedona\node_modules\http-proxy
npm ERR! extraneous: immutable@3.8.1 D:\sedona\node_modules\immutable
npm ERR! extraneous: localtunnel@1.8.3 D:\sedona\node_modules\localtunnel
npm ERR! extraneous: opn@4.0.2 D:\sedona\node_modules\opn
npm ERR! extraneous: portscanner@2.1.1 D:\sedona\node_modules\portscanner
npm ERR! extraneous: qs@6.2.1 D:\sedona\node_modules\qs
npm ERR! extraneous: resp-modifier@6.0.2 D:\sedona\node_modules\resp-modifier
npm ERR! extraneous: rx@4.1.0 D:\sedona\node_modules\rx
npm ERR! extraneous: serve-index@1.8.0 D:\sedona\node_modules\serve-index
npm ERR! extraneous: serve-static@1.12.2 D:\sedona\node_modules\serve-static
npm ERR! extraneous: server-destroy@1.0.1 D:\sedona\node_modules\server-destroy
npm ERR! extraneous: socket.io@1.6.0 D:\sedona\node_modules\socket.io
npm ERR! extraneous: socket.io-client@1.6.0 D:\sedona\node_modules\socket.io-client
npm ERR! extraneous: ua-parser-js@0.7.12 D:\sedona\node_modules\ua-parser-js
npm ERR! extraneous: yargs@6.4.0 D:\sedona\node_modules\yargs
npm ERR! extraneous: gulp-svgmin@1.2.4 D:\sedona\node_modules\gulp-svgmin
npm ERR! extraneous: gulp-svgstore@6.1.0 D:\sedona\node_modules\gulp-svgstore

Но это вроде бы уже исправил, на русскоязычных сайтах ничего не нашел, но где-то на stack overflow нашел и методом тыка (увы еще всего не понимаю) это исправил и понял, что это больше как предупреждение, что у меня глобально и локально установлены плагины. Я правильно все понял?

Но это не самое главное, теперь в консоли показывает такое сообщение, хотя таск watcher вроде работает и все остальное тоже. А код вот такой, подскажите если можете, что это такое? Иесли нужно исправить, то как, не совсем понятно

$ npm start

> sedona@0.1.0 start D:\sedona
> gulp serve

[22:33:42] Using gulpfile D:\sedona\gulpfile.js
[22:33:42] Starting 'style'...
[22:33:42] Finished 'style' after 16 ms
[22:33:42] Starting 'serve'...
[22:33:42] Finished 'serve' after 65 ms
[Browsersync] 1 file changed (style.css)
[Browsersync] Access URLs:
 ----------------------------------
    Local: http://localhost:3000
 External: http://192.168.0.16:3000
 ----------------------------------
[Browsersync] Serving files from: .
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[00:31:25] Starting 'style'...
[00:31:25] Finished 'style' after 4.24 ms
[Browsersync] 1 file changed (style.css)
[00:32:31] Starting 'style'...
[00:32:31] Finished 'style' after 3.28 ms
[Browsersync] 1 file changed (style.css)
[00:32:48] Starting 'style'...
[00:32:48] Finished 'style' after 3.16 ms
[00:32:48] Plumber found unhandled error:
 Error in plugin 'gulp-sass'
Message:
    sass\style.scss
Error: File to import not found or unreadable: blocks/page-form.scss.
       Parent style sheet: D:/sedona/sass/style.scss
        on line 20 of sass/style.scss
>> @import "blocks/page-form.scss";
   ^

Details:
    status: 1
    file: D:/sedona/sass/style.scss
    line: 20
    column: 1
    formatted: Error: File to import not found or unreadable: blocks/page-form.scss.
       Parent style sheet: D:/sedona/sass/style.scss
        on line 20 of sass/style.scss
>> @import "blocks/page-form.scss";
   ^

    messageFormatted: sass\style.scss
Error: File to import not found or unreadable: blocks/page-form.scss.
       Parent style sheet: D:/sedona/sass/style.scss
        on line 20 of sass/style.scss
>> @import "blocks/page-form.scss";
   ^

    messageOriginal: File to import not found or unreadable: blocks/page-form.scss.
Parent style sheet: D:/sedona/sass/style.scss
    relativePath: sass\style.scss

Это всё же ошибкой считается. Для предупреждений желтым WARN пишет.
Плагины чаще ставят локально(насколько я могла заметить). Когда ставите локально, они записываются в package.json.
Вторая ошибка у меня тоже была. Чтобы корректно работал @import, нужно в имени файла поставить _ , таким образом получается _page-form.scss

1 лайк

Ясно, хотя этот ERR! он ни на что не влияет, все работает вроде бы, спасибо за ответ)

Вопрос по второй ошибке
Название файла нужно изменить в папке с проектом название самого файла и в style.scss там где прописаны все импорты. @import “(и дописать тут _?)page-form.scss”? В двух местах переименовать. Я правильно понимаю?

Попробуйте в двух местах изменить. Мне понадобилось менять в одном месте, но я импорт по-другому писала, @import “variables”; например (без указания расширения файла).

Спасибо, помогло)