3

Установил 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>

2
  • 1
    youtu.be/vW51JUVT66w youtu.be/H4cG4tbc-xQ Сам просвещался тут. ))
    – Quazimorda
    4 мая 2018 в 19:12
  • 1
    @Rafael Shepard хорошее оформление вопроса.Буду приводить его в пример другим новичкам 11 мая 2018 в 11:40

2 ответа 2

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
1
  • Спасибо! По бутстрапу очень полезная инфа, не знал как устроено. 4 мая 2018 в 18:25
1

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

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

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

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

npm install bootstrap
npm install sass

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

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

4
  • Спасибо большое за подробный ответ, вопросов все еще много. Что лучше использовать? и Как быстро стартануть? 4 мая 2018 в 16:26
  • 1
    Для начала лучше использовать Gulp, он будет попроще немного чем Webpack, тем более поняв как работает одно ты поймёшь как работает другое. А быстрый старт, я бы порекомендовал вот эти видеоуроки: youtube.com/watch?v=vW51JUVT66w достаточно интересно рассказывает, сам учил Gulp на них. Помог как смог:) если что пиши, подскажу ещё что.
    – Zicrael
    4 мая 2018 в 16:53
  • 1
    Спасибо еще раз, от души!) пойду смотреть видео 4 мая 2018 в 18:08
  • Если будут вопросы пиши:)
    – Zicrael
    4 мая 2018 в 19:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.