web-dev-qa-db-fra.com

Comment démarrer avec la personnalisation de Bootstrap 3 avec LESS?

Je viens de télécharger Bootstrap 3 depuis https://github.com/twbs/bootstrap . Je regarde ce tutoriel: http://www.youtube.com/watch?v=I6EPArp4csA . Comment démarrer avec la modification des fichiers LESS? 

Ce que j'ai fait était de copier ces répertoires: LESS, dist/css dist/fonts dist/js et de créer mon nouveau projet. Le dossier de projet actuel ressemble à ceci:

css
less
js
index.html

avec le fichier HTML ayant ceci en haut:

<link rel="stylesheet/less" type="text/css" href="less/my_site.less"/> //only contains @import "bootstrap.less";
<script src="js/less.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>

Maintenant, lorsque j'essaie de modifier l'une des variables de variables.less et de la compiler avec SimpLESS, il y a une erreur de syntaxe: carousel.less. Ce qui donne? Lorsque je commente "carrousel.less", un autre problème survient avec dropdown.less. Alors peut-être que cela a quelque chose à voir avec les mixins? Quelqu'un a-t-il une idée de la façon dont j'ai commencé à passer à autre chose?

twitter-bootstraplesstwitter-bootstrap-3
13
Daryll Santos

Edit: 14 janvier 2015

À l'aide de gorgée

  1. Assurez-vous que le noeud est installé à partir de nodejs.org

    1.1: Own /usr/local afin que vous puissiez exécuter les commandes npm sans Sudo:

    Sudo chown -R `whoami` /usr/local

  2. Installer gulp globalement: npm install gulp -g

  3. Créez un dossier sur le bureau et accédez-y: cd ~/Desktop && mkdir boot-gulp && cd $_.
  4. Initiez le manifeste de projet: npm init et acceptez les valeurs par défaut.
  5. Installez gulp et gulp-less: npm install gulp gulp-less.
  6. Créez un fichier appelé gulpfile.js et collez le texte suivant dans ce fichier:

gulpfile.js

var gulp = require("gulp");
var less = require("gulp-less");

gulp.task("less", function() {
   gulp.src("less/main.less")
       .pipe(less())
       .pipe(gulp.dest("css"));
});
  1. Installer bower globalement: npm install bower -g
  2. Installez bootstrap avec bower: bower install bootstrap
  3. Créez le fichier less/main.less et chargez bootstrap.less:

less/main.less

@import "bower_components/bootstrap/less/bootstrap.less";
// overrides here
@primary: #000; 
// ...
  1. Exécutez gulp less et vous devriez voir la sortie dans le dossier css.

Ajout de la montre

  1. Ajoutez le plugin gulp-watch: npm install gulp-watch
  2. Mettez à jour gulpfile.js pour regarder tout fichier de moins et compiler automatiquement en css:

gulpfile.js

var gulp = require("gulp");
var less = require("gulp-less");
var watch = require("gulp-watch"); //+

gulp.task("less", function() {
  watch("less/**/*.less", function(){ //+
    gulp.src("less/main.less")
       .pipe(less())
       .pipe(gulp.dest("css"));
  }); //+
});

Maintenant, lancez gulp less. Il regarde maintenant tous les fichiers de moins dans le dossier less. Effectuez une modification et enregistrez n'importe quel fichier dans le dossier less. Le résultat devrait apparaître automatiquement dans le dossier css.

EDIT: 1 janvier 2014

Donnez Koala à essayer. Il compile vos fichiers LESS en temps réel. C'est gratuit et multi-plateforme. Vous pouvez également consulter cette FAQ à propos de la compilation de Bootstrap avec Koala.

Réponse originale

J'ai reproduit votre problème avec l'application que vous avez mentionnée. J'ai essayé une autre application telle que application crunch et cela a bien fonctionné. Donc, avec Crunch, il suffit de glisser-déposer le fichier bootstrap.less dans cette application et de cliquer sur le bouton crunch file dans le coin supérieur droit de l'application. Ensuite, il vous demandera où le sauvegarder. J'utilise personnellement l'outil de ligne de commande assets-packager (npm install -g assets-packager). J'espère que cela a aidé.

5
AJ Meyghani

Voici quelques-uns des meilleurs tutoriels que j'ai pu trouver sur Bootstrap 3 Less Workflow.

  1. http://www.helloerik.com/bootstrap-3-less-workflow-tutorial
  2. http://bootstrap.lesscss.ru/less.html

Et si vous voulez apprendre moins, vous pouvez vous référer à ces liens 

  1. http://lesscss.org (le site officiel moins)
  2. http://groupdocs.com/blog/using-bootstrap-with-less-css-tutorial
  3. http://designshack.net/articles/css/using-less-js-to-simplify-your-css3

J'espère que cela t'aides. 

2
S.Philip

si vous avez un serveur php, installez simplement lessphp:

lessphp

puis ajoutez ceci à votre première ligne:

<?php
    require "lessc.inc.php";
    $less = new lessc;
    $less->checkedCompile("stylesheet.less", "stylesheet.css");
?>

et tout ce que vous avez à faire est de travailler avec votre fichier moins et php fera le reste = ')

0
Facundo Colombier