Как эффективно использовать bootstrap-sass?

Question

В настоящее время я обнаруживаю модули с npm, и я перешел к использованию bootstrap-sass .Теперь, когда модули были загружены, я искал решение для компиляции scss в статическую папку приложения, а также в файлы начальной загрузки js.

Но, согласно документации модулей npmjs, я не могунашел простое решение, которое заключается не в том, чтобы самостоятельно перемещать файлы js и компилировать файлы начальной загрузки scss из node_modules с помощью чего-то вроде node-sass.

Какой самый простой способ использовать этот модуль правильно и с возможностью пользовательского?

Редактировать:

На данный момент я использую следующие скрипты / файлы:

"compile-js": "browserify assets/static/js/main.js | uglifyjs > assets/static/js/bundle.js",
"compile-sass": "node-sass assets/scss/app.scss assets/static/css/app.css --output-style compressed"

app.scss

@import "../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap-sprockets.scss";
@import "../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss";

main.js

global.jQuery = require("jquery")
const bootstrap = require('bootstrap-sass');

Answer 1

Я никогда раньше не использовал bootstrap-sass, но из документации следует, что инструмент для сборки для предварительной обработки SCSS является необходимым условием для использования этого модуля.Хотя это больше не самый блестящий инструмент в сарае, Gulp очень способен справиться с этой задачей, а также переместить файлы из node_modules в корневой каталог вашего проекта для вас.

ВотРазбивка одного подхода для реализации этого:

1. Создайте три подпапки в корневом каталоге вашего проекта и назовите их sass, css и javascript.
2. Создайте файлв папке sass и назовите ее app.scss.Откройте его и вставьте это: @import './node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss';.Когда файл конвертируется в CSS, все модули Bootstrap будут там.Под оператором @import в строке 1 не стесняйтесь писать любые правила стилей, какие захотите.
3. Если вы уже запустили npm init и у вас есть файл package.json в каталоге вашего проекта, запустите npm install gulp -Dв вашем терминале.Это установит gulp (мой выбор исполнителей!).
4. Run npm install gulp-sass --save-dev.Это установит плагин gulp, который будет предварительно обрабатывать SASS Bootstrap в CSS.
5. Создать файл в корневом каталоге (не в подпапках) с именем gulpfile.js
6. Скопируйте и вставьте этот текств gulpfile.js:

(примечание: чтобы это работало, ваши папки SASS и CSS должны называться sass и css соответственно, если вы не измените их имена в следующем коде.)

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

gulp.task('sass-to-css', function () {
    return gulp.src('./sass/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css'));
});

gulp.task('javascript', function () {
    return gulp.src('./node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js')
        .pipe(gulp.dest('./javascript'));
});

gulp.task('default', ['sass-to-css', 'javascript']);

Наконец, запустите команду gulp в своем терминале, чтобы выполнить gulpfile, который будет выполнять две вещи:

1. Предварительная обработка и переместить все SASS в вашПапка css.
2. Скопируйте bootstrap.min.js из node_modules в папку javascript вашего проекта.

Конечно, не забывайте ссылаться на эти ресурсы в вашемHTML.

Я на лету создал этот файл gulpfile, и он работает на моей машине, но если вы решите попробовать этот подход, то не стесняйтесь спрашивать, если что-то выдает ошибку.Желаем удачи в вашем проекте.