Gulp SASS-использовать @import без компиляции scss - > css

Я знаю, что это, вероятно, странный вопрос, но придерживайтесь меня. :)

можно ли использовать gulp sass (или другие плагины gulp) для чтения одного .файл scss с несколькими инструкциями @import и import /concat все эти @ import-ed файлы в один.файл scss что это не скомпилирован в CSS?

Справочная информация: я взял Bootstrap и FontAwesome базы .scss файлы и объединил их в один мастер .SCSS файл. Я теперь хотите получить все файлы в операторах @import в один .SCSS файл.

другой вариант, о котором я думал,-просто использовать инструмент concat, но тогда мне не пришлось бы вручную указывать каждый файл для конкат-ЭД в файле 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.

7
gulp gulp-concat gulp-sass

2 ответов

я наткнулся на ту же самую проблему. Этот поможет тебе. Хотя есть некоторые недостатки (забудьте о именах файлов с префиксом подчеркивания - это то, что я нашел до сих пор).

пакет npm, который строится специально для этой цели

отказ от ответственности: я не собираюсь объяснять, как работает npm, я предполагаю, что автор знает, что такое пакет npm, если он хочет использовать плагин gulp. Пожалуйста, не удаляйте мой ответ только потому, что я не без необходимости явно описывая то, что очевидно для человек, который задал вопрос. Чтобы предотвратить удаление этого ответа как отсутствующего контекста, я цитирую описание пакета.

импорт resolve
разрешить операторы @ import в таблицах стилей

что это значит
Что делать, если у вас есть меньше или стилус файлы, которые вы хотите разбить вместе в главный файл, без компиляции в css? Просто используйте import-resolve и все ваши мечты сбудутся. Все операторы @import будут разрешены, и вы останетесь с одним файлом, содержащим все ваши драгоценные миксины, переменные и объявления.

использование import-resolve

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

Да, вы можете использовать gulp-scss для этого или gulp-ruby-sass. Есть несколько там сейчас, что Gulp был вокруг в течение некоторого времени.

gulp-sass для компиляции файлов sass https://www.npmjs.com/package/gulp-sass

gulp-переименовать, чтобы переименовать файлы для папки распространения https://www.npmjs.com/package/gulp-rename

в моем случае я в настоящее время использую gulp-scss. Вы можете просто запустить задачу для ваших нужд, как это. В пример ниже базы.scss будет вашим файлом scss со всеми вашими инструкциями @import.

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

обновление:

Предположим, у вас уже есть база.scss создал, что уже имеет ваши операторы импорта. Вышеуказанный метод должен работать. Мы просто запускаем задачу scss в предоставленном файле, переименовываем его и перемещаем в любой каталог dest.

обновление 2

сохранение переменных потребует от вас использовать метод concat, поскольку все плагины Sass предназначены только для компиляции sass в css. Вам не нужно будет указывать все ваши файлы. Сначала только переменные, а затем вы можете запустить glob для всех ваших пользовательских sass. Просто убедитесь, что вы следуете аналогичной структуре папок, которая находится в массиве ниже для правильного разделения и организации активов.

вам не нужно будет беспокоиться о поддержании файла импорта. В этом не будет необходимости, и управлять будет меньше этот метод.

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