태그의 스타일 시트를 현재 페이지와 혼합하지 않으려면

Question

dashboard.jade에 내 header.jade 파일을 포함하는 include 태그가 있지만 header.jade 파일에 자체 스타일 시트가 있고 실행하면 대시 보드가 있습니다. jade의 스타일 시트는 포함 된 header.jade에도 적용됩니다. dashboard.jade의 스타일 시트를 포함 된 header.jade에만 적용 할 수있는 방법이 있습니까?

여기 dashboard.jade 내 코드입니다 :

doctype html 
 
html 
 
    head 
 
    title Todo List 
 
    | 	 
 
    |  
 
    link(rel='stylesheet', type='text/css', href='assets/css/todos.css') 
 
    | 	 
 
    |  
 
    link(href='https://fonts.googleapis.com/css?family=Roboto:400,700,500', rel='stylesheet', type='text/css') 
 
    | 	 
 
    |  
 
    link(rel='stylesheet', type='text/css', href=' https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css') 
 
    | 	 
 
    |  
 
    link(rel='stylesheet', href='//cdnjs.cloudflare.com/ajax/libs/lemonade/2.1.0/lemonade.min.css') 
 
    | 	 
 
    |  
 
    script(type='text/javascript', src='assets/plugins/jquery-3.0.0.min.js') 
 
    |  
 
    | 
 
    body 
 
    include partials/header

그리고 여기 header.jade 내 코드입니다 :

doctype html 
 
html 
 
    head 
 
    title Eisenhower Productivity Tool 
 
    // Meta 
 
    meta(charset='utf-8') 
 
    |  
 
    meta(http-equiv='X-UA-Compatible', content='IE=edge') 
 
    |  
 
    meta(name='viewport', content='width=device-width, initial-scale=1.0') 
 
    |  
 
    meta(name='description', content='') 
 
    |  
 
    meta(name='author', content='') 
 
    |  
 
    |  
 
    link(rel='shortcut icon', href='../favicon.ico') 
 
    | 
 
    |  
 
    link(href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800', rel='stylesheet', type='text/css') 
 
    // Global CSS 
 
    link(href='../assets/plugins/bootstrap/css/bootstrap.min.css', rel='stylesheet') 
 
    // Plugins CSS 
 
    link(rel='stylesheet', href='../assets/plugins/font-awesome/css/font-awesome.css') 
 
    // Theme CSS 
 
    link#theme-style(rel='stylesheet', href='assets/css/styles.css')

뉴욕 도움이 크게 감사합니다, 감사합니다!

Answer 1

다른 CSS 스타일 시트를 사용하려면 일반적인 Jade/Pug block 문과 함께 레이아웃 기반 환경을 사용하는 것이 좋습니다.

이는 layoutbased 폴더 structur 모습 수있는 방법입니다 :

|--./ 
|-- |--jade 
|-- |-- |-- layouts 
|-- |-- |-- |-- mylayout.jade 
|-- |-- |-- template_1.jade 
|-- |-- |-- template_2.jade 

이것은 당신의 레이아웃 파일 mylayout.jade 수 :

doctype html 

block vars 
    // Some default variables 

html 

    head 
    block head 
     // default head for title and meta 

    block defaultCSS 
     // default css 
     link(rel='stylesheet', type='text/css', href='path/to/default_style.css') 
     style. 
     body {} 

    block additionalCSS 

    body 
    block body 
     // default html in body 
    block footer 

    block defaultJS 
    script. 
     var someDefaltJavaScript = 'awsome" 

그리고 여기에 템플릿 파일

template_1.jade :

extends layout/mylayout.pug 

block head 
    // this overrides the default "block head" from the layout 
    // So put your special meta for your page here 

block additionalCSS 
    link(rel='stylesheet', type='text/css', href='path/to/other_style.css') 

block body 
    .this 
    .is 
     #where 
     .your.content.goes 

template_2.jade :

extends layout/mylayout.pug 

block head 
    // this overrides the default "block head" from the layout 
    // So put your special meta for your page here 

//- We dont use the "block additionalCSS" because we dont need it in this template 

block body 
    .this 
    .is 
     #where 
     .your.content.goes 

만 templatefiles를 컴파일주의는 여기에 몇 가지 다른 예입니다 http://jade-lang.com/reference/extends/.

또한 GitHub의에 나의이 작은 옥 응용 프로그램에 좀 걸릴 수 있습니다 : 시간 ttps://github.com/pure180/gulp-pug-inheritance-test/tree/master/app