Как обрабатывать CSS с метеор?

Question

Я создаю тестовое приложение, чтобы узнать, как организовать несколько файлов с помощью METEOR.

У меня есть head.html и внутри у меня ссылку на мой пользовательский CSS:

<!-- Custom CSS --> 
    <link type="text/css" rel="stylesheet" href="/stylesheets/globals/style.css"/> 

Очень нормальный, Но у меня есть проблемы, чтобы сделать эту работу.

Вот мое приложение каталог:

-app folder 
---client 
-----head.html 
-----index.html 
-----stylesheets 
-------globals 
---------style.css 

Я знаю, что это, кажется, очень простой вопрос, но я не могу понять это.

Answer 1

В основном у вас есть 2 способа вставки CSS в проекте Метеор:

• Используя инструмент Метеор сборки автоматически конкатенации и Минимизировать все ваши CSS файлы живут в каталоге client/: в этом случае вы не необходимо импортировать таблицы стилей, используя тег ссылки в голове. Это идеально подходит для жизненно важных файлов CSS, которые ваше приложение должно загружать при запуске.

Пример: поместите свой файл CSS под client/stylesheets/globals/style.css и все, его нужно импортировать, он автоматически вводится в ваш проект Meteor.

• Используя классический способ импорта таблиц стилей в веб-приложении вы можете поместить ваши CSS файлы внутри каталога public/, и они будут обслуживаться вашим сервером приложений. В этом случае процесс сборки Meteor будет пропущен, поэтому файлы не будут объединены вместе и не будут уменьшены. Используйте этот метод, когда вам нужна ленивая загрузка больших файлов CSS, необходимых только в подразделе вашего приложения (например, стилизация раздела администратора).

Пример: положить уменьшенную файл CSS под public/stylesheets/admin/style.css, и использовать что-то вроде iron:router, чтобы загрузить файл CSS, поражая маршрут администратора.

Router.route("/admin", { 
    // onRun hooks executed only once 
    onRun: function(){ 
    // create a link taf holding a reference to our publicly served CSS file 
    var link=$("<link>",{ 
     rel: "stylesheet", 
     href: "/stylesheets/admin/style.css" 
    }); 
    // append to the head tag 
    $("head").append(link); 
    } 
});