Come posso importare bootstrap-sass una volta e usarlo in diversi file?

Question

Nei documenti si può leggere quanto segue:

Importa Bootstrap in una Sass file (ad esempio, application.css.scss) per ottenere tutti gli stili, mixins e le variabili di Bootstrap!

@import "bootstrap"; 

https://github.com/twbs/bootstrap-sass

Ho diversi file SCSS. Uno per ogni sezione principale della mia app (user-page.scss, admin.scsss ecc.).

Ho provato a creare un file application.scss e importato come nei documenti. Ho aggiunto il file in index.html dopo bootstrap.scss e prima di tutti i miei altri file scss.

<link rel="stylesheet" href="bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap-compass.scss" /> 
<link rel="stylesheet" href="styles/application.css"> 
<link rel="stylesheet" href="styles/intro.css"> 
<link rel="stylesheet" href="styles/admmin.css"> 

ottengo il seguente errore:

/usr/bin/scss --no-cache --update intro.scss:intro.css 
     error intro.scss (Line 22: Undefined mixin 'make-row'.) 

Così sembra che non trova bootstrap. Funziona se importare bootstrap in ogni file. È questo il giusto apporach? Penso di no. Ottengo problemi quando provo a sovrascrivere manualmente una variabile bootstrap.

Come posso avere diversi file scss e importare solo il bootstrap una volta?

Answer 1

Pensa di mixare l'importazione SCSS con i link HTML HTML. Quindi questo bit qui è errato:

<link rel="stylesheet" href="bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap-compass.scss" /> 
<link rel="stylesheet" href="styles/application.css"> 
<link rel="stylesheet" href="styles/intro.css"> 
<link rel="stylesheet" href="styles/admmin.css"> 

Presumo che questo è dal tuo file HTML costruito. Il tuo HTML non sa cosa sia un file SCSS. Il tuo SCSS deve essere elaborato in un file CSS prima che sia utilizzabile nel file HTML finale.

Il modo per importare un file SCSS è utilizzare il comando di importazione all'interno del file SCSS principale nella parte superiore. Quindi, se il file SCSS principale è application.scss, poi in cima a quello, di importare altri file SCSS:

@import "bootstrap"; 

Ma è necessario assicurarsi che il file _bootstrap.scss si trova nella stessa directory del file application.scss per questa importazione al lavoro.