12

gulp-sass を使用して、.scss ファイルを含めることができます@import 'filepath.scss';

しかし、通常の css ファイルを でインポートしようとすると、実際にコードをインポートするのではなく、出力 css ファイルに@import 'filepath.css'import 行を追加しただけです。import url(filepath.css);

CSS ファイルと SCSS ファイルをインポートするにはどうすればよいですか? バウアーからファイルを含めるためにこれを行いたいです。

これが私のgulp関数です：

// include gulp
var gulp = require('gulp');

// include deps
var minifyCSS  = require('gulp-minify-css'),
    autoprefix = require('gulp-autoprefixer'),
    rename     = require('gulp-rename'),
    sass       = require('gulp-sass');

var targets = {
    css: './output/css'
};

// compile CSS
gulp.task('sass', function() {

    gulp.src([
        './app/assets/scss/app.scss', 
        './app/assets/scss/app-admin.scss'
    ])
    .pipe(sass({
        includePaths: [
            './bower_components/bootstrap-sass-official/vendor/assets/stylesheets', 
            './bower_components'
        ],
        errLogToConsole: true
    }))

    .pipe(autoprefix('last 2 versions'))
    .pipe(gulp.dest(targets.css))
    .pipe(minifyCSS())
    .pipe(rename(function (path) { path.basename += '.min'; }))
    .pipe(gulp.dest(targets.css));
});

たとえば、上記datatables/media/css/jquery.dataTables.cssのbowerディレクトリに相対的なデータテーブルを含めたいとします。

だから私のapp.scssファイルには@import 'datatables/media/css/jquery.dataTables.css';

gulp-sass を使用してこれを行うことができない場合、他にどのように行うことができますか?

4

5 に答える 5

7

gulp-cssimportは、縮小されていない開発環境でも css インポートを機能させたい場合に適しています。

于 2015-05-12T09:50:30.093 に答える
0

多くの場合、これは次のように HTML ファイル内のすべてのファイルをリストするだけで解決されます。

<!-- 'vendor' styles -->
<link rel="stylesheet" href="datatables/media/css/jquery.dataTables.css"/>
<link rel="stylesheet" href="some/other/plugin.css"/>
<!-- refernce to the SCSS compilation output -->
<link rel="stylesheet" href="styles/main.css"/>

これには、たとえば@extendディレクティブを使用して、SCSS ファイルから「ベンダー」CSS ファイルで定義されたクラスを参照できないという欠点があると思います (そうする必要はありませんでした)。それ以外には、css ファイルで変数、ミックスイン、またはその他の再利用可能なスタイルのブロックを定義できないため、この方法で実行できなかった機能的な理由はないと思います。

ただし、次の 2 つの理由から、CSS ファイルを 1 つの css ファイルに結合したいと考える人が多くいます。

  1. 読み込みに必要なファイルの量 (= HTTP リクエストの量) を最小限に抑えると、ページの読み込み時間が短縮されます
  2. css opitmiser ( csso など) を使用すると、1 つのモノリシックな CSS ファイルからオーバーラップを見つけることができます。これにより、最適化がより効率的になる可能性があります。

これを実現するために、gulp-userrefがよく使用されます。そのためには、HTML でスタイルシート参照を囲む特別なコメントが必要です。

<!-- build:css styles/combined.css -->
<link rel="stylesheet" href="datatables/media/css/jquery.dataTables.css"/>
<link rel="stylesheet" href="some/other/plugin.css"/>
<link rel="stylesheet" href="styles/main.css"/>
<!-- endbuild -->

上記のマジック コメントは、コメント間で参照される CSS ファイルを という名前のファイルに連結するように userref に指示しますstyles/combined.css。もちろん、これを行うには、次のように、gulpfile で userref の使用を指示する必要があります。

var gulp = require('gulp'),
    useref = require('gulp-useref'),
    gulpif = require('gulp-if'),
    csso = require('gulp-csso');

gulp.task('html', function () {
    var assets = useref.assets();

    return gulp.src('app/*.html')
        .pipe(assets)
        .pipe(gulpif('*.css', csso()))
        .pipe(assets.restore())
        .pipe(useref())
        .pipe(gulp.dest('dist'));
});

これを機能させるには、最初に SCSS ファイルをコンパイルする必要があることに注意してください。

このようにする理由の 1 つは、開発時に CSS が機能する表示可能な HTML ページを取得するために必要な処理時間を最小限に抑えることです。つまり、SCSS ファイルに変更を加えた後、変更を表示できるようにするために gulp が行う必要があるのは、SCSS ファイルをコンパイルすることだけです。これは、「魔法のコメント」間の CSS 参照がそのように機能するためです。 . 保存後にbrowserSyncを使用して変更を表示すると、ブラウザに変更が表示されるまでの遅延を最小限に抑えることができます。「gulp-userref」を使用する必要があるのは、「本番用のコンパイル」のみです。

SlushまたはYeomanジェネレーターのいくつか、またはそれらが生成するコードを確認することをお勧めします。少なくとも、Yeoman ジェネレーター ' gulp -webapp ' は userref を使用しているようです。ジェネレーターを使用したくない場合でも、その出力はベスト プラクティスを発見するための優れたレシピ本として役立ちます (問題のジェネレーターがよくできていると仮定します)。

于 2015-01-01T03:34:45.940 に答える