Bootstrap 3.0 Media queries

Je travaille sur un petit projet basé sur Bootstrap 3 (html5boilerplate de génération personnalisée) et d'essayer d'utiliser le "officielle" media queries dans le bootstrap de la documentation:

/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) { ... }

Pour une raison quelconque, les requêtes de média ne semble pas exister (@screen-sm, écran-md, écran-lg), je suis à la recherche de ce dans les fichiers d'amorçage, mais ne peut pas trouver des références.

Mon exemple de code (principale.css):

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) {

    .header-btn {display: none;}

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) {

    .slogan {display: none;}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) {}

En gros ce qui se passe, c'est... rien!

J'obtiens ces erreurs dans google Chrome:
http://i.solidfiles.net/0d0ce2d2a7.png

Des idées?