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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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