Суть такова, (использую сасс и галп) когда проверяю через созданный локально сервер с отслеживанием изминений и когда просто открываю страницу (правой кнопкой - открыть с помощью), то они отображают сайт по разному. Все, что открыто с помощью сервера на всех сайтах отображается чуть иначе, чем если открыто просто с помощью правой кнопки, допустим ширина
меняется, точнее не ширина, а такст постяонно менятется, когда на сервере смотрю, то выглядит так как мне нужно, а когда локально открыт, то уже текст полностью не помещается. Это только один из примеров.
Вопрос в следующем, как с этим жить? Или что является правдой, а что нет? Так как когда поправки сделал для локально открытого сайта, то на сервере тот же параграф уже вмещает в строку уже больше текста. Я так понимаю он меняет размеры грифта. Но что является правильным отображением? Спасибо за внимание, надеюсь мысль понятно изложил)
Мысль то понятна, но здесь нужен код(ссылочка на репозиторий была бы кстати + содержимое gulpfile.js), если хотите, чтобы кто-то за вас разбирался, или инспектор (о нём вы не упомянули, возможно не используете), если хотите разобраться сами.
еще начал проверять все страницы и увидел, что стили не применялись к checkbox и radiobutton. Не понятно… Точнее в хроме эти кнопки работают, а в фаерфоксе и опере нет. А что за инспектор, если не секрет?) Хотел бы самому понимать, где, что спрятано.
Но файлы *.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 качал
Спасибо за помощь, очень помогли! Вроде-бы теперь работает как и через localhost, так и локально открытый сайт. Установил плагины и вроде с ними чуток разобрался, были только моменты, в консоли писало:
Но это вроде бы уже исправил, на русскоязычных сайтах ничего не нашел, но где-то на 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
Ясно, хотя этот ERR! он ни на что не влияет, все работает вроде бы, спасибо за ответ)
Вопрос по второй ошибке
Название файла нужно изменить в папке с проектом название самого файла и в style.scss там где прописаны все импорты. @import “(и дописать тут _?)page-form.scss”? В двух местах переименовать. Я правильно понимаю?
Попробуйте в двух местах изменить. Мне понадобилось менять в одном месте, но я импорт по-другому писала, @import “variables”; например (без указания расширения файла).