Concat Scss файлы через @import или с помощью инструмента сборки - PullRequest
Новая
       37

Concat Scss файлы через @import или с помощью инструмента сборки

0 голосов
/ 30 апреля 2019

Я знаю, как по-разному объединять / объединять файлы scss.

  1. каждый через обработчик задач, например, в gulp (это должно быть похоже на grunt или webpack) 

    // gulpfile.js
gulp.src([
    "./assets/scss/var.scss",
    "./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
    "./node_modules/bootstrap/scss/bootstrap.scss",
    "./assets/scss/frontend/nav.scss",
    "./assets/scss/frontend/footer.scss"
])

  2. каждый через @import в файле scss: 

    // assets/scss/frontend.scss
@import 'var.scss'
@import "~bootstrap/scss/bootstrap"
@import "~@fortawesome/fontawesome-free/scss/fontawesome"
@import 'frontend/nav'
@import 'frontend/footer'

// gulpfile.js
gulp.src("./assets/scss/frontend.scss")

Каковы преимущества и недостаткидва пути?

1 Ответ

1 голос
/ 30 апреля 2019

1-й пример: представьте, что у вас есть таблица стилей (utils.scss), от которой зависят nav.scss и footer.scss.Если вы передадите только один файл в gulp, то директивы импорта будут разрешены, а стили будут импортированы в правильном порядке.С другой стороны, если вы передадите несколько файлов в gulp, вам нужно самим управлять порядком файлов.

2-й пример: представьте, что только footer.scss зависит от utils.scss.По какой-то причине вы решили удалить стили нижнего колонтитула из сборки gulp.Если вы добавили utils.scss с директивой SASS @import, она будет автоматически исключена из сборки, но если вы передали все свои стили в Gulp, вам нужно будет вручную удалить footer.scss и utils.scss.

Поэтому я думаю, что второй подход с директивой @import намного лучше.

...