Gulp SASS - Sử dụng @import mà không cần biên dịch scss -> css

Question

Tôi biết đây có lẽ là một câu hỏi kỳ lạ, nhưng gắn bó với tôi. :)

Có thể sử dụng gulp sass (hoặc các plugin gulp khác) để đọc một tệp .scss với nhiều câu lệnh @import và nhập/concat tất cả các tệp @ import-ed đó vào một tệp .scss duy nhất là không phải được biên dịch sang CSS?

Thông tin cơ bản: Tôi đã lấy các tệp cơ sở Bootstrap và FontAwesome .scss và kết hợp chúng thành tệp .scss chính duy nhất. Bây giờ tôi muốn nhận tất cả các tệp trong câu lệnh @import thành một tệp .scss duy nhất.

Một tùy chọn khác mà tôi nghĩ là chỉ sử dụng công cụ concat, nhưng sau đó tôi sẽ không phải chỉ định thủ công từng tệp được concat-ed trong tệp gulp? Đúng nếu tôi sai.

Ví dụ về những gì tôi đang tìm kiếm:

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

Imports

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

Và

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

Để làm

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

Lưu ý rằng @import s được bao gồm trong tệp final.scss, nhưng không có bất kỳ trình biên dịch nào từ SCSS -> CSS.

Answer 1

Tôi đã gặp phải vấn đề tương tự. Điều này sẽ giúp bạn. Mặc dù có một số sai sót (quên tên tập tin có tiền tố gạch dưới - đó là những gì tôi tìm thấy cho đến bây giờ).

the npm package that is build especially for this purpose

Disclaimer: Tôi không sẽ giải thích làm thế nào các công trình NPM, tôi giả định tác giả biết gói NPM là gì nếu ông muốn sử dụng plugin ngụm. Xin vui lòng không loại bỏ câu trả lời của tôi chỉ vì tôi không mô tả một cách rõ ràng những gì rõ ràng đối với một người là một câu hỏi. Để tránh việc xóa câu trả lời này vì thiếu ngữ cảnh, tôi đang trích dẫn mô tả gói.

nhập khẩu quyết tâm
báo cáo quyết tâm @import trong stylesheets

Điều này không
gì nếu bạn có một số tác phẩm ít hoặc bút stylus mà bạn muốn đập vỡ lại với nhau thành một tập tin tổng thể, mà không biên dịch để css? Chỉ cần sử dụng nhập khẩu-giải quyết và tất cả những giấc mơ của bạn sẽ trở thành sự thật. Tất cả các câu lệnh @import sẽ được giải quyết và bạn sẽ bị bỏ lại với một tệp chứa tất cả các kết hợp, biến và khai báo quý giá của bạn.

Sử dụng nhập giải quyết

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

Answer 2

Có, bạn có thể sử dụng gulp-scss cho mục này hoặc gulp-ruby-sass. Có một vài hiện có mà Gulp đã được khoảng một thời gian bây giờ.

ngụm-sass để biên dịch các tập tin sass https://www.npmjs.com/package/gulp-sass

ngụm-đổi tên để đổi tên các tập tin cho các thư mục phân phối https://www.npmjs.com/package/gulp-rename

Trong trường hợp của tôi, tôi hiện đang sử dụng ngụm-SCSS. Bạn có thể chỉ cần chạy một nhiệm vụ cho nhu cầu của bạn như vậy. Trong ví dụ dưới đây, base.scss sẽ là tệp scss của bạn với tất cả các câu lệnh @import của bạn.

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

Cập nhật:

Giả sử bạn đã có base.scss tạo mà đã có báo cáo nhập khẩu của bạn. Phương pháp trên sẽ hoạt động. Chúng tôi chỉ cần chạy nhiệm vụ scss trên tập tin được cung cấp, đổi tên nó, và di chuyển nó vào bất kỳ thư mục đích nào của bạn.

Cập nhật 2

Giữ lại các biến sẽ yêu cầu bạn phải sử dụng phương thức concat như tất cả các plugin sass chỉ dành cho biên soạn sass để css. Bạn sẽ không cần phải chỉ định tất cả các tệp của mình. Chỉ cần các biến đầu tiên, và sau đó bạn có thể chạy một glob cho tất cả các sass tùy chỉnh của bạn. Chỉ cần đảm bảo bạn theo một cấu trúc thư mục tương tự nằm trong mảng bên dưới để phân tách và tổ chức tài sản đúng cách.

Bạn cũng sẽ không phải lo lắng về việc duy trì tệp nhập. Sẽ không cần thiết cho nó và sẽ có ít hơn để quản lý với phương pháp này.

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