Как скомпилировать sass файлы bootstrap-material-design с помощью gulp? - PullRequest
Новая
       6

Как скомпилировать sass файлы bootstrap-material-design с помощью gulp?

0 голосов
/ 04 сентября 2018

Я изо всех сил пытался скомпилировать файлы scss в css.

Я не очень часто использовал gulp и sass, и документы по этой конкретной структуре не помогают в этом вопросе.

Мой gulpfile выглядит так 

var gulp = require('gulp');
var sass = require('gulp-sass');

var scssFile='assets/scss/bootstrap-material-design.scss';
gulp.task('sass', function () {
  return gulp.src(scssFile)
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('_site/assets/css'));
});

Я сделал npm install gulp gulp-sass --save-dev для установки библиотек.
И я скопировал содержимое этой папки https://github.com/FezVrasta/bootstrap-material-design/tree/master/scss в папку с именем "scss"

Сейчас работает gulp sass дает мне эту ошибку:

[13:54:37] Использование gulpfile ~ / workspace / imb4 / gulpfile.js
[13:54:37] Начало 'sass' ...
Ошибка в плагине "sass"
Сообщение:
активы / СКС / _variables.scss
Ошибка: файл для импорта не найден или не читается: ~ bootstrap / scss / functions.
в строке 56 активов / scss / _variables.scss
из строки 2 активов / scss / _core.scss
из строки 3 активов / scss / bootstrap-material-design.scss
>> @import "~ bootstrap / scss / functions"; // из начальной загрузки node_module
^
[13:54:37] Готово 'sass' через 50 мс

Это потому, что я скопировал не ту папку scss?

Нужно ли npm install bootstrap-material-design@4.1.1? (Я пробовал это, но я не могу require(), потому что ему нужен jQuery или что-то в этом роде.)

Нужно ли ссылаться на файлы scss, которые находятся в node_modules?

Ошибка говорит, что ей нужна папка начальной загрузки. Нужно ли мне вручную загружать файлы начальной загрузки и копировать их в эту папку? Должен ли я сделать npm install bootstrap?

Это, наверное, глупый вопрос, но я уже застрял на этом часами.

1 Ответ

0 голосов
/ 04 сентября 2018

Клонируйте папку в ссылке как есть на ваши активы / scss

Ваш gulpfile должен называть ваш главный вход sass файлом style.scss - в вашем случае "bootstrap-material-design.scss"

этот файл sass содержит только один импорт - @import "core";

_core import _variables.scss, _mixins.scss etc ...

ваш файл _variables.scss имеет 

@import "~bootstrap/scss/functions"; // from bootstrap node_module
@import "~bootstrap/scss/variables"; // from bootstrap node_module

Итак, он ищет папку node_modules / bootstrap, 

npm install bootstrap

добавит его.

когда вы запускаете задачу gulp и sass начинает компилировать, для корректной компиляции нужны полные файлы начальной загрузки, расположенные в папке node_modules / bootstrap / scss /.

ваш «bootstrap-material-design.scss» сначала импортирует _core, _core затем импортирует _variables, _variables импортирует несколько пользовательских файлов из другой папки переменных в каталоге scss, а затем просматривает папку node_modules (в строке 56) с @import "~ bootstrap / scss / functions";

ваша задача gulp будет получать ссылки на ваши sass-файлы (все, что с подчеркиванием компилируется во время сборки) - это выплевывает простой файл css, где бы вы ни указывали в качестве места назначения, например, "assets / css / style.css" на какой файл вы должны ссылаться в своем html после сборки.

если это все еще не происходит для вас, возможно, вам просто нужно решить проблему с простым путем. Версии начальной загрузки могут отличаться в структуре sass fodler, поэтому дважды проверьте ваш путь в node_modules / bootstrap / scss /, на самом деле есть папка функций.

Если это так, попробуйте @import "./node_modules/bootstrap/functions";

Если этого не произойдет, возможно, вам придется проверить свою версию начальной загрузки.

Например, при начальной загрузке 4.1.1 они импортируются, а не папки @import '~ bootstrap / scss / _functions'; @import '~ bootstrap / scss / _variables';

...