Задать вопрос
@Wekeed
javascript

Не срабатывают стили на одной странице при создании другой?

Использую Parcel и препроцессор Pug. После создании страницы отличной от index.pug, например, company.pug , я делаю ссылку на эту страницу в общем файле для всех страниц header.pug, после чего стили со страницы index.pug все слетают, а в company.pug работают корректно. Все стили и скрипты подключаются в main.js. В чем может быть проблема?

index.pug
<!DOCTYPE html>
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        meta(http-equiv="X-UA-Compatible", content="ie=edge")
        title Главная | СК "Газ"
    body.page
        include includes/header
        main.main
            include includes/sectionOne
            include includes/sectionTwo
            include includes/sectionThree
            include includes/sectionFour
            include includes/sectionFive
        include includes/footer
        include includes/modules/ModalCallBack
        script(src='assets/js/main.js')


company.pug
<!DOCTYPE html>
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        meta(http-equiv="X-UA-Compatible", content="ie=edge")
        title О компании
    body.page.page-company.page-other
        include /../includes/header
        main.main
        include /../includes/footer
        script(src='/assets/js/main.js')


header.pug
.header-menu.menu--desktop.col-6l.col-12s.flex
    nav.nav
        a(href="/pages/company.pug").nav-link О компании
        a(href="").nav-link Услуги
        a(href="").nav-link Акции и новости
        a(href="").nav-link Контакты


Структура проекта:
54ea961f20ca223ac3a6911fe0eae7b9.png
  • Вопрос задан
  • 234 просмотра
Комментировать
Подписаться 1 Сложный Комментировать
Пригласить эксперта
Ответы на вопрос 2
smargelov
@smargelov
Верстальщик
Суть Pug в том числе и в избавлении от дублирования кода.
Я использую шаблон, который подключаю к страницам. Данные в шаблоне меняются в соответствии с переменными на странице.

куски моего стартового шаблона для примера
main.pug
include ../utils/mixins
block variables

doctype html
html(lang="ru-RU")
	head
		meta(charset="utf-8")
		title #{title}
		<!--[if IE]>
		meta(http-equiv='X-UA-Compatible', content="IE = edge")
		<![endif]-->
		meta(name="viewport" content="width=device-width,initial-scale=1")
		meta(name="keywords" content="")
		link(rel="stylesheet" type='text/css' href="css/styles.min.css")
		include ../modules/header/favicon
		include ../modules/header/og
		<!--[if lt IE 9]>
		script(src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js")
		<![endif]-->
	body
		.wrapper
			include ../modules/header/header
			.content
				block content
			include ../modules/footer/footer
		script(src="js/jquery-3.3.1.min.js")
		script(src="js/libs.min.js")
		script(src="js/main.js")
		block script


index.pug
extends template/main

block variables
	- var title = 'Главная страница'

block content

Ответ написан
Комментировать
Комментировать
@Andy_Francev
Frontend Developer
Это ошибка Parcel.
Он не любит вставленных в разные страницы одного и того же js файла с импортированным одним и тем же css.
Для каждой страницы создай свой js: index.js, company.js, ... с содержимым: import 'assets/js/main.js'

Если пошли ошибки, можно попробовать наложить патч.
Ставишь: postinstall-postinstall и patch-package.
Создаёшь в корне проекта папку 'patches'
Кладёшь в неё файл: 'parcel-bundler+1.12.4.patch'

diff --git a/node_modules/parcel-bundler/src/packagers/JSPackager.js b/node_modules/parcel-bundler/src/packagers/JSPackager.js
index a07ff3b..8adcc67 100644
--- a/node_modules/parcel-bundler/src/packagers/JSPackager.js
+++ b/node_modules/parcel-bundler/src/packagers/JSPackager.js
@@ -216,6 +216,12 @@ class JSPackager extends Packager {
       );
       await this.addAssetToBundle(asset);
       entry.push(asset.id);
+
+      let cssLoaderAsset = await this.bundler.getAsset(
+        require.resolve('../builtins/css-loader')
+      );
+      await this.addAssetToBundle(cssLoaderAsset);
+      entry.push(cssLoaderAsset.id);
     }
 
     if (await this.writeBundleLoaders()) {


В скрипты package.json добавляешь: "postinstall": "patch-package"
Делаешь npm install

Надеюсь, поможет, как помогло мне. Или ты решил проблему как-то по другому?
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Смонтировать видео
23 нояб. 2024, в 01:31
1000 руб./за проект
Настроить сайт
23 нояб. 2024, в 00:16
2000 руб./за проект
Разобрать текущий ETL-процесс
22 нояб. 2024, в 23:55
3000 руб./за проект
Ещё заказы