13

https://github.com/twbs/bootstrapから Bootstrap 3 をダウンロードしました。このチュートリアルを見ています: http://www.youtube.com/watch?v=I6EPArp4csA . LESS ファイルの変更を開始するにはどうすればよいですか?

私がしたことは、次のディレクトリをコピーすることでした: LESS、dist/css、dist/fonts、dist/js、および新しいプロジェクトを作成します。現在のプロジェクト フォルダーは次のようになります。

css
less
js
index.html

これを上部に持つHTMLファイル：

<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>

ここで、variables.less 内の変数の 1 つを変更して SimpLESS でコンパイルしようとすると、Syntax Error: carousel.less が発生します。何を与える？「carousel.less」をコメントアウトすると、dropdown.less で別の問題が発生します。ミックスインと何か関係があるのでしょうか？これをどのように進め始めるかについて、誰かが考えを持っていますか?

4

3 に答える 3

5

編集: 2015 年 1 月 14 日

ガルプの使用

  1. nodejs.org からノードがインストールされていることを確認してください

    1.1: 所有/usr/localするので、sudo なしで npm コマンドを実行できます。

    sudo chown -R `whoami` /usr/local

  2. gulp をグローバルにインストールします。npm install gulp -g

  3. デスクトップにフォルダを作成し、そこに移動します: cd ~/Desktop && mkdir boot-gulp && cd $_.
  4. プロジェクト マニフェストを開始しnpm initます。既定値を受け入れます。
  5. gulp と gulp-less: をインストールしますnpm install gulp gulp-less。
  6. というファイルをgulpfile.js作成し、そのファイルに次を貼り付けます。

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. bower をグローバルにインストールします。npm install bower -g
  2. bower でブートストラップをインストールします。bower install bootstrap
  3. ファイルless/main.lessを作成してロードしますbootstrap.less。

less/main.less

@import "bower_components/bootstrap/less/bootstrap.less";
// overrides here
@primary: #000; 
// ...
  1. 実行gulp lessすると、css フォルダーに出力が表示されます。

時計を追加する

  1. gulp-watchプラグインを追加します。npm install gulp-watch
  2. gulpfile.js以下のファイルを監視し、自動的に 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"));
  }); //+
});

今実行しますgulp less。現在、lessフォルダー内のすべての少ないファイルを監視しています。変更を加えてlessフォルダーにファイルを保存すると、出力がフォルダーに自動的に表示されcssます。

編集: 2014 年 1 月 1 日

コアラを試してみてください。LESS ファイルをリアルタイムでコンパイルします。無料でクロスプラットフォームです。Koala での Bootstrap のコンパイルに関するこの FAQ も参照してください。

元の回答

ご指摘のアプリで問題を再現しました。Crunchアプリなどの別のアプリを試してみましたが、問題なく動作しました。そのため、crunch では、bootstrap.lessファイルをそのアプリにドラッグ アンド ドロップしcrunch file、アプリの右上隅にあるボタンをクリックするだけです。次に、どこに保存するか尋ねられます。私は個人的にコマンド ライン ツールの assets-packager ( npm install -g assets-packager) を使用しています。お役に立てば幸いです。

于 2013-08-31T16:51:55.700 に答える
0

PHPサーバーがある場合は、lessphpをインストールするだけです。

少ないphp

次に、これを最初の行に追加します。

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

あなたがしなければならないのは、少ないファイルで作業することだけで、phpが残りを行います= '）

于 2013-12-30T21:05:33.780 に答える