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

274
06 мая 2018, 17:09

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

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

Вопрос:

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

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

<!doctype html> 
    <html lang="ru"> 
      <head> 
        <meta charset="utf-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> 
        <link rel="stylesheet" href="css/style.scss"> 
        <title>Hello, world!</title> 
      </head> 
     
      <body> 
        <h1>Hello, world!</h1> 
     
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> 
      </body> 
    </html>

Answer 1

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

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

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

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

npm install bootstrap
npm install sass

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

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

Answer 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
ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте standart-s.com.ua
ТОП-10
READ ALSO
Сделать долгой загрузку страницы
HTML

Сделать долгой загрузку страницы

Нужно сделать страницу так, чтоб грузилась очень долго, но не знаю как ето зделать, помогите

 203
Получение информации с сайта C++
HTML

Получение информации с сайта C++

Такое задание: Есть список авторов и нужно получить все их публикации на сайте elibraryru

 200
Не срабатывает autoplay у видео
HTML

Не срабатывает autoplay у видео

Всем привет!

 204
vue js onclick for select
HTML

vue js onclick for select

Пытался сделать так, чтобы при создании селектов опция, которая уже установлена продукту была сразу выставленаВсе бы ничего, но мне захотелось...

 295