Bootstrap + SASS, как начать работу?

#html #css #bootstrap #sass

Установил SASS через консоль, по этому туториалу sass-scss.ru. 

В работе мне потребуется bootstrap.

Вопрос: 


Как начать использовать в проекте SASS, создать файл style.scss и писать в него css
код или нужны дополнительные действия? 
Как правильно подключить bootstrap и начать его использовать в проекте? 


Сейчас на начальной стадии, html код выглядит так:




    
      
        
        
        
        
        
      
    
      
        
Hello, world!
    
        
        
        
      
    



    

Ответы

Ответ 1

Если честно все не так просто, советую посмотреть/почитать гайд по развёртыванию
проекта на Gulp/Webpack так как если писать тут выйдет очень много кода. Что бы использовать
Sass нужно сначало развернуть NPM + например Webpack.

https://proglib.io/p/webpack-in-15/ - пример,  но в интернете их ещё масса, стоит
лишь поискать. 

Но для новичка Gulp будет легче в плане понимания. 

После того как ты установишь зависимости на свой проект, выполни установку ещё двух
пакетов: 

npm install bootstrap
npm install sass


И далее опиши таски в webpack/gulp, опять таки примеров в интернете много. 

Будут вопросы пиши:)


Ответ 2

1. Вариант: Использовать webpack или gulp сборщик. Быстро и удобно, но нужно правильно
настроить. Примеров сборки в сети достаточно много.

Для gulp сборки выполнить: 

npm i –g gulp
npm i --save-dev gulp
npm i --save-dev gulp-sass
npm i bootstrap


Настроить gulpfile.js.

Подключение bootstrap в style.scss:

@import "node_modules/bootstrap/scss/bootstrap.scss";


2. Вариант: Использовать online конверторы (например sassmeister ). Минусы - долго
и неудобно.

3. Вариант: Конвертер с помощью командной строки ruby. Для этого нужно установить
rubyinstaller. Запустить командную строку ruby. Выполнить команды:

gem install sass

sass input.scss output.css


или

sass --watch input.scss:output.css