web-dev-qa-db-ja.com

gulp-sass @importCSSファイル

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

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

CSSファイルとSCSSファイルをインポートするにはどうすればよいですか？ Bowerからファイルを含めるためにこれを実行したいと思います。

これが私の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));
});
_

たとえば、上記のように、bowerディレクトリに対して_datatables/media/css/jquery.dataTables.css_にあるデータテーブルを含めたいと思います。

したがって、_app.scss_ファイルには_@import 'datatables/media/css/jquery.dataTables.css';_があります

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

javascriptcssgulpgulp-sass
12
Nicekiwi

MinifyCSSにいくつかのパラメーターを渡すことで、これを実現できます。

.pipe(minifyCSS({
        relativeTo: './bower_components',
        processImport: true
    }))

出典：
gulp-minify-css は clean-css に依存し、参照されるオプションは ここ で説明されています。

7
Nicekiwi

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

6
Alp

「filename.css」の名前を「filename.scss」に変更し、@ import「filename」に変更します。ファイル拡張子なし。

0
Vardmev

多くの場合、これは次のように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-useref がよく使用されます。そのためには、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ファイルをstyles/combined.cssという名前のファイルに連結するようにuserefに指示します。もちろん、これを行うには、gulpfileでuserefの使用法を次のように指示する必要があります。

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が行う必要があるのは、「魔法のコメント」間のCSS参照がそのように機能するため、SCSSファイルをコンパイルすることだけです。 。 browserSync を使用して保存後の変更を表示する場合、これにより、変更がブラウザーに表示されるまでの遅延を最小限に抑えることができます。 「gulp-useref」を使用する必要があるのは、「本番用にコンパイルする」だけです。

Slush または Yeoman ジェネレーターのいくつか、またはそれらが生成するコードを確認することをお勧めします。少なくともYeomanジェネレーター ' gulp-webapp 'はuserefを使用しているようです。ジェネレーターを使用したくない場合でも、それらの出力は、ベストプラクティスを見つけるための優れたレシピブックとして役立ちます（問題のジェネレーターが適切に作成されていることを前提としています）。

0
Kalle Björklid