12

http://bootswatch.com/のvariables.lessファイルとbootstrap.lessファイルからbootstrap.cssファイルをどのように生成しますか？

lessCを使用してコンパイルすると、cssファイルが取得されますが、これはbootstrap.cssよりもはるかに小さいです。テーマの1つで色を変更するにはどうすればよいですか？

トンありがとう。

4

3 に答える 3

22

Bootswatch Swatchmakerは素晴らしいですが、Bootswatchテーマをよりスクリプト可能な環境に含めようとしている場合や、Bootswatchテーマがどのように組み合わされているかをよりよく理解する必要がある場合もあります。Bootswatchテーマを手動でコンパイルする方法は次のとおりです。

  1. ソースからTwitterBootstrapをダウンロードし、解凍します。
  2. Bootswatchファイルvariables.lessをフォルダbootswatch.lessに移動しless/、既存のvariables.lessファイルを置き換えます。
  3. の最後にbootstrap.less、を追加します@import "bootswatch.less";。
  4. コンパイルしbootstrap.lessます。Bootstrapが提供するgruntタスクを使用することをお勧めします。
于 2013-05-04T21:06:40.737 に答える
15

Bootswatch Swatchmaker

Bootswatchのメーカー兼メンテナーであるThomasParkは、Bootswatchのテーマをカスタマイズしたり、新しいテーマを作成したりするために、Swatchmakerという小さなキットを作成しました。

詳細については、GitHubのBootswatchリポジトリにあるSwatchmakerのreadmeを確認してください。

設定が完了したら、編集するテーマのLESSファイルをswatchディレクトリに追加し、カスタマイズを使用して変数を編集します。

swatchmaker.lessの内容は、それが何をするかについてのまともな要約を提供します。

@import "bootstrap/less/bootstrap.less";
@import "swatch/variables.less";
@import "swatch/bootswatch.less";
@import "bootstrap/less/utilities.less";

次に、bootstrap.cssがから生成されlessc swatchmaker.less > bootstrap.cssます。

于 2012-11-27T18:51:11.357 に答える
1

これを「補足」の回答として行う方法はわかりませんが（@mervはすでに正しい回答を提供しています！）、万が一の場合に備えて、次のようにします。

私の問題は、bootstrap.lessファイルとvariables.lessファイルだけを使用して、Bootstrapディストリビューションですでに開発されているGruntタスクを単純に使用する方法で新しいテーマを生成したいということでした。新しいテーマをコンパイルするためにBootswatch固有のツールをインストールしたくありませんでした。

パス/lib/bootstrapからのコアブートストラップを使用する変更されたビルドスクリプトがすでにあります。テーマもlibの一部であると考えていますが、独自のディレクトリ/ lib/themeを指定しました。

テーマディレクトリ内に、http：//bootswatch.comからダウンロードした2つのファイル、つまり「bootswatch.less」と「variables.less」を配置しました。つまり、これら2つのファイルは、それ自体では実際には「何もしません」。彼らはまだBootstrapに依存しています。つまり、すべてをフックするということは、私が「theme.less」と呼んだ3番目のファイルを作成することを意味しました。theme.lessの内容は、上記の@mervで説明されているとおりです。

@import "../bootstrap/less/bootstrap.less";
@import "variables.less";
@import "bootswatch.less";
@import "../bootstrap/less/utilities.less";

プロジェクトをどのように構成したかによって、パスは異なります。次に、Gruntfile.js（Bootstrapに含まれているものから変更）で、compileTheme構成オブジェクトを見つけて、この新しいtheme.lessファイルを指すように変更します。

compileTheme: {
    options: {
      strictMath: true,
      sourceMap: true,
      outputSourceFiles: true,
      sourceMapURL: '<%= pkg.name %>-theme.css.map',
      sourceMapFilename: 'dist/css/<%= pkg.name %>-theme.css.map'
    },
    src: 'lib/theme/theme.less',
    dest: 'dist/css/<%= pkg.name %>-theme.css'
  }

変更されたのは「src」行だけです。

> grunt dist（またはその他の関連するうなり声のタスク）を実行すると、新しい場所からテーマが取得され、Bootstrapに含まれているファイルの適切な部分が適用され、新しいテーマが生成されます。

それが誰にとっても役立つことを願っています。これはbootstrap.cssファイルではなくbootstrap-theme.cssファイルであるため、OPに直接応答しませんが、この記事の執筆時点でBootstrap3.2以降で人々が行う傾向に沿っています。さらに重要なことに、LESSとGruntのすべてに比較的慣れていない人にとっては、ブートストラップディレクトリ内のファイルを上書きせずにビルドスクリプトを変更するのはかなり苦痛のない方法です。

于 2014-12-24T17:44:52.393 に答える