Cómo compilar el código fuente bootstrap-4.0.0

Debido a que bootstrap 4.0.0 abandonará menos y usará sass para procesar css, el entorno de desarrollo necesita instalar el complemento SASS (Ruby debe instalarse primero).

Instalar Ruby, omitido.

Instalar SASS

gem install sass

Instalar Node.js, omitido.

Instalar grunt

npm install -g grunt

Instalar node-sass, y la mayoría de los entornos son normales. Si la instalación no tiene éxito, podrá ver la compilación manual de la sección CSS más adelante.

npm install -g node-sass

Empaquetado Grunt, agregar parámetros obligatorios

grunt --force

Compilar en el directorio dist Exporte los siguientes archivos

|-- dist

|-- css

|-- bootstrap.css

|-- bootstrap css.map

|-- bootstrap.min.css

|-- bootstrap.min.css.map

|-- js

|-- bootstrap.js

|-- bootstrap.min.js

|-- npm.js

|-- umd< / p>

|-- alert.js

|-- button.js

|-- carousel.js

|-- colapso. js

|-- dropdown.js

|-- modal.js

|-- popover.js

|-- scrollspy .js

|-- tab.js

|-- tooltip.js

|-- util.js

scsslint check Es posible que se informe un error, puedes desactivar BundleExcc en lugar de usar uno local

//Puedes elegir instalar tus gemas a través del paquete y, de ser así, configurar esta opción en verdadero para usar las gemas locales. .

//Puedes elegir instalar tus gemas a través del paquete y, de ser así, establecer esta opción en verdadero para usar las gemas locales.

scsslint: {

opciones: {

bundleExec: false,

config: 'scss/.scss-lint.yml',

reporterOutput: null

},

src: ['scss/*.scss', '!scss/_normalize.scss']

}

Compilar css manualmente Cuando ingrese al directorio scss, verá una gran cantidad de archivos scss.

Concéntrese principalmente en los siguientes:

|-- scss

|-- ...

|-- bootstrap.scss

| -- bootstrap-flex.scss

|-- bootstrap-grid.scss

|-- bootstrap-reboot.scss

|-- ..

Puede utilizar el comando sass para generar directamente el archivo css y el archivo de mapa correspondientes

sass bootstrap.scss bootstrap.css

sass bootstrap-flex. scss bootstrap-flex .css

sass bootstrap-grid.scss bootstrap-grid.css

sass bootstrap-reboot.scss bootstrap-reboot.css