J'utilise Rails 4.2.3. J'ai ce fichier, app/assets/stylesheets/application.css.scss (ne me demandez pas pourquoi, lorsque j'ai créé le projet, Rails vient de créer automatiquement ce fichier pour moi).

/*
…
 *= require_self
 *= require_tree .
 *= require jquery-ui
 */

html {
    background-image: url(/assets/tile.jpg);
    background-repeat: repeat;
    background-position: left top;
}

Je voulais ajouter du bootstrap, et divers tutoriels m'ont recommandé d'ajouter des instructions "@import" pour que cela fonctionne. Alors j'ai essayé

…
 *= require_self
 *= require_tree .
 *= require jquery-ui
 */
@import "bootstrap-sprockets";
@import "bootstrap";
@import 'bootstrap/theme'

html {
    background-image: url(/assets/tile.jpg);
    background-repeat: repeat;
    background-position: left top;
}

Mais maintenant quand je charge ma page j'obtiens l'erreur

Sass::SyntaxError in Users#edit

Invalid CSS after "html ": expected selector or at-rule, was "{"

Quelle est la bonne façon d'inclure les directives d'amorçage dans mon fichier application.css.scss ?

0
user6447029 21 juin 2016 à 17:04

2 réponses

Meilleure réponse

Vous avez oublié de terminer votre dernière importation par un point-virgule.

/*
 *= require_self
 *= require_tree .
 *= require jquery-ui
 */
@import "bootstrap-sprockets";
@import "bootstrap";
@import 'bootstrap/theme';

html {
    background-image: url(/assets/tile.jpg);
    background-repeat: repeat;
    background-position: left top;
}
0
casraf 21 juin 2016 à 17:09

Personnellement, je préfère importer tous mes actifs plutôt que scss.

Ajoutez la gemme bootstrap au Gemfile, https://rubygems.org/gems/bootstrap. Créez un dossier bootstrap_and_overrides dans app/assets/stylesheets et app/assets/javascripts.

app
 |_assets
   |_javascripts
     |_bootstrap_and_overrides
       |_bootstrap.js 
   |_stylesheets
     |_bootstrap_and_overrides
       |_bootstrap.scss
       |_variables.scss
       |_overrides.scss

Votre application.js ressemble à ceci :

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require tether
//= require bootstrap_and_overrides/bootstrap

Et votre application.css.scss :

@import "bootstrap_and_overrides/variables";
@import "bootstrap_and_overrides/bootstrap";
@import "bootstrap_and_overrides/overrides";

Exemple pour bootstrap.js sur vos actifs javascript. Avec cela, vous pouvez choisir ce qu'il faut charger et ce qu'il ne faut pas :

//= require bootstrap/util
//= require bootstrap/alert
//= require bootstrap/button
// require bootstrap/carousel
//= require bootstrap/collapse
//= require bootstrap/dropdown
// require bootstrap/modal
// require bootstrap/scrollspy
//= require bootstrap/tab
//= require bootstrap/tooltip
//= require bootstrap/popover

Exemple pour bootstrap.scss dans vos éléments de feuille de style :

// Core variables and mixins
//@import "bootstrap/variables";
@import "bootstrap/mixins";
// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
// Core CSS
@import "bootstrap/reboot";
@import "bootstrap/type";
@import "bootstrap/images";
//@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";
// Components
@import "bootstrap/animation";
@import "bootstrap/dropdown";
@import "bootstrap/button-group";
//@import "bootstrap/input-group";
//@import "bootstrap/custom-forms";
@import "bootstrap/nav";
@import "bootstrap/navbar";
@import "bootstrap/card";
@import "bootstrap/breadcrumb";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
//@import "bootstrap/jumbotron";
@import "bootstrap/alert";
@import "bootstrap/progress";
@import "bootstrap/media";
@import "bootstrap/list-group";
@import "bootstrap/responsive-embed";
@import "bootstrap/close";
// Components w/ JavaScript
//@import "bootstrap/modal";
@import "bootstrap/tooltip";
@import "bootstrap/popover";
//@import "bootstrap/carousel";
// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/utilities-background";
@import "bootstrap/utilities-spacing";
@import "bootstrap/utilities-responsive";

Ces deux fichiers sont simplement une version copiée de la gem bootstrap. Le variables.scss est également le fichier de variables standard de la gem bootstrap. Je pense que c'est le meilleur moyen possible d'inclure le bootstrap à votre projet de rails avec un contrôle total sur ce qu'il faut charger et ce qu'il ne faut pas.

1
Alexander Rühle 22 juin 2016 à 10:59