7

これはおそらく奇妙な質問だと思いますが、私に固執してください。:)

gulp sass (または他の gulp プラグイン) を使用して、複数の @import ステートメントを含む単一の .scss ファイルを読み取り、それらのすべての @import されたファイルを CSS にコンパイルされていない単一の .scss ファイルにインポート/連結することは可能ですか?

背景情報: Bootstrap と FontAwesome の基本 .scss ファイルを取得し、それらを 1 つのマスター .scss ファイルに結合しました。@import ステートメント内のすべてのファイルを単一の .scss ファイルに取得したいと考えています。

私が考えた別のオプションは、連結ツールを使用することでしたが、gulp ファイルで連結する各ファイルを手動で指定する必要はありませんか? 私が間違っている場合は修正してください。

私が探しているものの例：

//base.scss
@import foo;
@import bar;

輸入品

//foo.scss
$my-font-size:20px;

と

//bar.scss
body {
  div {
    font-size:$my-font-size;
  }
}

作る

//final.scss
$my-font-size:20px;
body {
  div {
    font-size:$my-font-size;
  }
}

@imports がファイルに含まれていることに注意してくださいfinal.scss。ただし、SCSS -> CSS からのコンパイルはありません。

4

2 に答える 2

1

私はまったく同じ問題に遭遇しました。これはあなたを助けるつもりです。いくつかの欠陥があります（アンダースコアで始まるファイル名を忘れてください-それは私が今まで見つけたものです）。

この目的のために特別にビルドされた npm パッケージ

免責事項: npm がどのように機能するかを説明するつもりはありません。作者が gulp プラグインを使用したい場合、npm パッケージが何であるかを知っていると仮定します。質問をした人にとって明らかなことを不必要に明示的に説明していないという理由だけで、私の回答を削除しないでください。コンテキストが不足しているとしてこの回答が削除されるのを防ぐために、パッケージの説明を引用しています。


スタイルシート内の @import ステートメントを 解決する


css にコンパイルせずに、いくつかのより少ないファイルまたはスタイラス ファイルをマスター ファイルにまとめたい場合はどうなりますか? import-resolve を使用するだけで、すべての夢が実現します。すべての @import ステートメントが解決され、貴重なミックスイン、変数、および宣言をすべて含む 1 つのファイルが残ります。

インポート解決の使用

npm install import-resolve
// some-node-thing.js 
var importResolve = require('import-resolve');

// spits out a master dist file with all your wonderful stylesheet 
// things concatenated 
importResolve({
    "ext": "less",
    "pathToMain": "path/to/main.less",
    "output": "path/to/output.less"
});

// if you don't specify an output file, output accepts a callback parameter 
// and passes the concatenated file text 
var output = importResolve({
    "ext": "styl",
    "pathToMain": "path/to/main.styl"
}, function (output) {
    fs.writeFile('foo.styl', output, function (){
        console.log('did it myself.');
    });
});
于 2016-02-29T14:42:30.883 に答える
-1

はい、これには gulp-scss または gulp-ruby-sass を使用できます。Gulp が登場してからしばらく経ちますが、いくつかあります。

sass ファイルをコンパイルする gulp-sass https://www.npmjs.com/package/gulp-sass

配布フォルダーhttps://www.npmjs.com/package/gulp-renameのファイルの名前を変更するには、gulp-rename を使用します 。

私の場合、現在gulp-scssを使用しています。このように、必要に応じてタスクを簡単に実行できます。以下の例では、base.scss がすべての @import ステートメントを含む scss ファイルになります。

var gulp   = require('gulp'),
    scss   = require('gulp-scss'),
    rename = require('gulp-rename');

gulp.task('sass', function () {
  gulp.src('base.scss')
    .pipe(scss())
    .pipe(rename('final.scss'))
    .pipe(gulp.dest('assets/css/'));
});

アップデート：

すでに import ステートメントを含む base.scss が作成されていると仮定します。上記の方法は機能するはずです。提供されたファイルに対して scss タスクを実行し、名前を変更して、任意の dest ディレクトリに移動するだけです。

更新 2

すべての sass プラグインは sass を css にコンパイルするためのものであるため、変数を保持するには concat メソッドを使用する必要があります。すべてのファイルを指定する必要はありません。最初に変数だけを指定してから、すべてのカスタム sass に対して glob を実行できます。アセットを適切に分離および編成するために、以下の配列にある同様のフォルダー構造に従っていることを確認してください。

インポート ファイルの維持についても心配する必要はありません。その必要がなくなり、この方法で管理する必要が少なくなります。

var gulp   = require('gulp'),
    concat = require('gulp-concat');

var sassConcat = [
  'sass/variables.scss',
  'sass/modules/**/*.scss'
];

gulp.task('sass', function () {
  gulp.src(sassConcat)
  .pipe(concat('final.scss'))
  .pipe(gulp.dest('../assets/sass/'));
};
于 2015-12-19T02:57:04.807 に答える