Meteor.js에서 특정 (전체가 아닌) css 파일 만로드하는 방법

Meteor.js (한 페이지 웹 앱이 아닌)로 일반적인 웹 사이트를 개발하고 모든 페이지에 대해 특정 css 파일 만로드하려고합니다. . 따라서 모든 페이지가 동일한 CSS 코드를 공유하지는 않습니다. 가능합니까?Meteor.js에서 특정 (전체가 아닌) css 파일 만로드하는 방법

출처

2014-11-01 Eugene

- 그것은 느린 당신의 응용 프로그램을 만들 것입니다. 현재 가장 좋은 방법은 웹 사이트의 모든 CSS를 하나의 파일로 연결하는 것입니다. – stubailo

웹 사이트의 CSS 크기에 따라 다르므로 모든 경우에 해당하는 것은 아닙니다. CSS 로딩 프로세스가 페이지 렌더링을 차단합니다. 따라서 CSS가 거의없는 경우에는 CSS를 완전히로드하거나 인라인하는 것이 좋습니다. 그러나 CSS가 많은 경우 첫 번째 CSS를로드하는 것이 좋습니다. 단 하나의 페이지 또는 두 배 이상의 내용 만 렌더링하고 나머지 스타일은로드하지 않는 것이 좋습니다. 더 많은 정보는 다음에서 찾을 수 있습니다. https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery – Eugene

@Eugene에서 몇 가지 사항을 알려 주시고 답변을 수락 해주십시오. – benstr

먼저 "유적"사이트를 구축하지 않는 유성을 사용하는 경우 매우 강력한 SPA (단일 페이지 응용 프로그램)를 구축하고 있습니다. 라우팅을 도입하여 "보통"의 웹 사이트를 모방 할 수 있습니다 (IronRouter).

이제 CSS에 대해 확인하십시오. Meteor를 배포하면 모든 CSS와 JS가 병합되고 축소됩니다. 따라서 당신이 원하는 것을 성취하고 싶다면이 패키지를 추가 할 필요가 있습니다. https://github.com/davidd8/meteor-external-file-loader

https://atmospherejs.com/mrt/external-file-loader

그런 다음 한 번 템플릿을 생성 트리거 첨부 :

Template.myCustomTemplate.created = function() { 
    Meteor.Loader.loadCss("//example.com/myCSS/style.css"); 
};

난 당신이 또한 유성의 자산 API를 통해 유성 서버에서 CSS를로드 할 수 있으리라 생각합니다. 자세히 알아보기 : https://docs.meteor.com/#/full/assets

출처

2014-11-01 23:50:35 benstr

유성에 대한 매우 짧고 정확한 설명 정말로! :) +1 –

하지만 이전 뷰로 다시 이동하면 CSS가로드됩니다. CSS가 제거되지 않으므로 이전 뷰 CSS가 변경됩니다. – Ankita

질문의 마지막 부분에 "모든 페이지가 동일한 CSS 코드를 공유하지 않습니다." less를 사용하고 다른 div 클래스에서 템플릿을 래핑하는 것을 고려할 수 있습니다. 예를

HTML 파일

<template name="page1"> 
    <div class="page1css"> 
     <p class="content">Page 1 content</p> 
    </div> 
</template>

LESS 파일

.page1css { 
    .content { 
     font-size: 2em; 
    } 
}

당신이 당신의 페이지를 포장 할 수 있습니다이 방법 올바른 클래스에서 해당 CSS를 들어

출처

2014-11-02 04:24:28 JoshJoe

이 방법은 어떤 페이지가 방문되었는지에 상관없이 전체 앱에 대한 모든 CSS를 여전히로드합니다. – benstr

예, 사실이지만 한 번만로드됩니다. 그런 다음 템플릿에 대해 특정 CSS를 사용합니다. 유진이 정확히 무엇을 성취하려고했는지 나는 확신하지 못했습니다. – JoshJoe

개인적으로 동일한 개념을 사용하여 다른 템플릿의 스타일 간 겹침을 방지합니다. 차별화를 위해 ID를 사용하는 것이 좋습니다. 템플릿 page1은 "view-page1"이라는 ID를 얻습니다. 충돌을 피하기 위해 view로 시작하는 ID를 사용하지 않는 것을 기억하면됩니다. 또한 공유 스타일이있는 common.less 파일이 있습니다. 'meteor add less' –

간단한 해결책을 찾았습니다. 유성 프로젝트 폴더에 "public"(따옴표 제외)이라는 폴더를 만듭니다. 해당 폴더에서 "css"(따옴표 제외)라는 폴더를 만듭니다. 해당 폴더에 CSS 파일을 넣으십시오. 당신이 특정 CSS 파일은 다음과 같이 적용 할 HTML 파일에서

는 :

이 권장되지 않습니다

<head> 
<link href="css/yourfile.css" rel="stylesheet"> 
</head>

출처

2015-07-26 19:37:30

Meteor.js에서 특정 (전체가 아닌) css 파일 만로드하는 방법

답변

관련 문제