ngụm-sass tập tin @import CSS

Question

Sử dụng ngụm-sass tôi có thể bao gồm các file .scss với @import 'filepath.scss';

Nhưng khi tôi cố gắng để nhập các file css bình thường với @import 'filepath.css', Nó chỉ thêm vào dòng nhập khẩu import url(filepath.css); đến css đầu ra tệp, thay vì thực sự nhập mã.

Làm cách nào để nhập tệp CSS cũng như tệp SCSS? Tôi muốn làm điều này để bao gồm các tập tin hình thức bower.

Đây là chức năng ngụm tôi:

// 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)); 
}); 

Ví dụ tôi muốn bao gồm datatables mà là ở datatables/media/css/jquery.dataTables.css tương đối so với thư mục Chòi chơi như bao gồm ở trên.

Vì vậy, trong tập tin app.scss của tôi, tôi có @import 'datatables/media/css/jquery.dataTables.css';

Nếu tôi không thể sử dụng ngụm-sass để làm điều này, làm thế nào khác tôi có thể làm điều đó?

Answer 1

Truyền một số tham số đến minifyCSS cho phép tôi đạt được điều này.

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

Nguồn:
gulp-minify-css phụ thuộc vào clean-css, tùy chọn tham chiếu giải thích here.

Answer 2

Khá thường xuyên này được giải quyết đơn giản bằng cách liệt kê tất cả các tập tin trong file HTML như vậy:

<!-- '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"/> 

Tôi cho rằng điều này sẽ có những nhược điểm của việc không thể refernce đến lớp được định nghĩa trong 'nhà cung cấp 'Tệp CSS từ các tệp SCSS chẳng hạn với chỉ thị @extend (Tôi chưa có nhu cầu làm như vậy). Khác hơn thế, tôi không nghĩ rằng có bất kỳ lý do chức năng tại sao nó không thể được thực hiện theo cách này vì nó không thể xác định các biến, mixin hoặc khối tái sử dụng khác của phong cách trong các tập tin css.

Tuy nhiên, nhiều người muốn kết hợp các file CSS vào một tập tin css vì hai lý do:

1. Giảm thiểu số lượng các tập tin cần thiết để tải (= số lượng yêu cầu HTTP) sẽ tăng tốc độ tải trang thời gian
2. Sử dụng opitmiser css (chẳng hạn như csso) có thể tìm thấy các chồng chéo từ tệp CSS nguyên khối và việc tối ưu hóa này có thể hiệu quả hơn.

Để đạt được điều này, gulp-useref thường được sử dụng. Để làm như vậy, HTML cần có coments đặc biệt xung quanh các stylesheets tham khảo:

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

Các ý kiến ​​kỳ diệu trên Hướng dẫn, useref để nối các file CSS tham chiếu giữa các ý kiến ​​vào một tập tin có tên styles/combined.css. Tất nhiên, đối với điều này xảy ra, bạn sẽ cần phải hướng dẫn việc sử dụng useref trong gulpfile của bạn, một cái gì đó như thế này:

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')); 
}); 

Lưu ý rằng các tập tin SCSS cần phải được biên dịch đầu tiên để làm việc này.

Một trong những lý do làm theo cách này là thời gian xử lý cần thiết để có được một trang HTML có thể xem được với CSS hoạt động khi phát triển được giảm thiểu. Tức là, sau khi bạn đã sửa đổi các tệp SCSS của mình, điều duy nhất mà gulp cần làm để có thể hiển thị các thay đổi là biên dịch các tệp SCSS, vì các tham chiếu CSS giữa các 'nhận xét ma thuật' sẽ hoạt động như vậy . Nếu bạn sử dụng browserSync để xem các thay đổi sau khi lưu, điều này sẽ giúp giảm thiểu độ trễ cho các thay đổi được hiển thị trong (các) trình duyệt của bạn. Chỉ 'biên dịch cho sản xuất' bạn cần sử dụng 'gulp-useref'.

Tôi khuyên bạn nên xem một số máy phát điện Slush hoặc Yeoman, hoặc đúng hơn là mã do chúng tạo. Ít nhất máy phát điện Yeoman 'gulp-webapp' dường như sử dụng useref. Ngay cả khi bạn không muốn sử dụng các máy phát điện, đầu ra của chúng phục vụ như một cuốn sách công thức tốt để khám phá các thực hành tốt nhất (giả sử máy phát điện đang được đặt ra cũng được thực hiện).

Answer 3

gulp-cssimport là lựa chọn tốt nếu bạn cũng muốn nhập khẩu css hoạt động trong môi trường phát triển không được rút gọn.