Для установки гем bootstrap-sass я должен удалить * = require_self из application.scss или заменить его на import '@require_self'

Я устанавливаю гем bootstrap-sass, и эта строка, связанная с application.scss, меня смущает.

'Затем удалите все * = require_self и * = require_tree. операторы из файла sass. Вместо этого используйте @import для импорта файлов Sass. '

Нужно ли мне удалить *= require_self и *= require_tree . и заменить их на import '@require_self' и import '@require_tree .' или просто удалить их?

Также для любых других импортированных файлов внутри application.scss, например

 *= require dataTables/jquery.dataTables
 *= require froala/froala_editor.min.css

я должен изменить их на

 @import 'dataTables/jquery.dataTables'
 @import 'froala/froala_editor.min.css'

Просто запуталась и хотела бы получить подтверждение, что здесь делать.


person Rob    schedule 18.03.2016    source источник


Ответы (2)


При использовании bootstrap-sass удалите все из своего application.scss и вместо этого добавьте к нему следующее:

#"bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

Если вы хотите загрузить дополнительные файлы scss / sass, вы можете @import их в application.scss
Если вы хотите загрузить файлы css, вы можете * = require им нравится следующее:

/*
*= require_self
*= require your_css_file
*/
@import "bootstrap-sprockets";
@import "bootstrap";
person dp7    schedule 18.03.2016
comment
Хорошо, поэтому используйте @import для файлов sass и *= require для файлов css. Это правильно? - person Rob; 18.03.2016

Я столкнулся с аналогичной проблемой с Bootstrap 4 Ruby Gem для Rails https://github.com/twbs/bootstrap-rubygem. В его инструкции также есть фраза:

Затем удалите все операторы * = require и * = require_tree из файла Sass. Вместо этого используйте @import для импорта файлов Sass.

Не используйте * = require в Sass, иначе ваши другие таблицы стилей не смогут получить доступ к миксинам и переменным Bootstrap.

Вот противоречие.

Если я делаю то, что мне говорят, это означает, что я теряю возможность отменить объединение всех моих (s)css-файлов в один application.scss (и один application.css в браузере) на этапе разработки. Если я вручную импортирую все свои scss-файлы в application.css - это означает, что я вставляю содержимое каждого файла в более крупный, и Sprockets больше не контролирует такое объединение - как я делаю это вручную. И мне это не нравится - на стадии разработки, так как я не могу четко понять, из какого css-файла пришел этот стиль.

Поэтому я выбрал другой вариант - оставил application.css нетронутым, затем создал файл bootstrap_code.scss (не смог назвать его bootstrap.scss, так как он запутал Rails) с директивой @import "bootstrap"; внутри, и, наконец, я создал файл z.scss для своих стилей - просто чтобы убедиться они подойдут ПОСЛЕ тех же стилей начальной загрузки.

Конечно, у моего решения такой недостаток, что мои scss-файлы не могут

доступ к миксинам и переменным Bootstrap

(потому что Sprockets преобразует их в css, что не дает им возможности сначала погрузиться в Bootstrap scss), но поскольку мне нужен простой css из Bootstrap, это нормально на мгновение.

Конечно, на этапе производства я могу вернуться к рекомендуемому подходу, описанному в документации по гемам («удалить все * = require ...»), если мне действительно нужны миксины и переменные Bootstrap (что мне обычно не нужно).

person prograils    schedule 03.12.2017