Cómo usar Bootstrap con ReactJs
bootstrap-loader y un conjunto de cargadores que funcionan con él: bootstrap-sass(bootstrap3) css-loader node-sass sass-loader style-loader url-loader. Para obtener más información, consulte la documentación oficial
prefijo automático postcss-loader: agrega prefijos automáticamente, como -webkit-box
react-bootstrap: usa componentes de arranque en reaccionar
configuración de bootstrap-loader
Agregar una referencia a bootstrap en la entrada del paquete web
Entrada: [
'bootstrap-loader',
path.resolve(projectRootPath,'src/app.js')
]
Luego agregue el archivo de configuración .bootstraprc en el directorio de la aplicación con respecto a los componentes a ser utilizado Hay instrucciones de configuración y plantillas muy detalladas en la documentación oficial para la selección y configuración. Puedes usarlo directamente.
Luego agregue las funciones de carga de css, woff2, tff y otros archivos en el archivo de configuración del paquete web module.loaders
loaders: [
{
prueba:/\.js$/,
excluir:/node_modules/,
cargador: 'babel-loader',
consulta : {
presets: ['es2015', 'react', 'stage-0'],
plugins: ['transform-decorators-legacy']
}
},
{prueba：/\.css$/, cargador: 'style!css'},
{ prueba：/\ .css $/,
loader: 'style!css?modulesamp;importLoaders=2amp;sourceMapamp;localIdentName=[local]___[hash:base64:5]!postcss-loader!sass?outputStyle=expandedamp ;sourceMap '{ prueba：/\.scss$/,
{ estilo!css amp; sourceMap'
},
{
prueba:/\.woff2?(\?v=[0-9]\. [0-9]\. [0-9])? $/,
cargador: "url ?límite =10000"
},
{
prueba:/\.(ttf|eot|svg)(\? [\s\S] )? $/,
cargador: 'archivo'
}
]cargadores: [
{
prueba :/\.js$/,
excluir:/node_modules/,
cargador: 'babel-loader',
consulta: {
presets: ['es2015', 'react', 'stage-0'],
plugins: ['transform-decorators-legacy']
}
},
{prueba:/\.css$/, cargador: 'style!css'},
{ prueba:/\ .css $/,
loader: 'style!css?modulesamp;importLoaders=2amp;sourceMap&localIdentName=[local]___[hash:base64:5]!postcss-loader!sass?outputStyle=expandedamp ; mapa fuente'
},
{
prueba./(\?v=[0-9]\. [0-9]\. [ 0 -9])? $/,
cargador: "url?limit=10000"
},
{
prueba : /\.(ttf|eot|svg)(\? [\s\S] )?$/,
cargador: 'fil
e'
}
]
Finalmente, puede configurar algunos estilos CSS en .bootstraprc para reemplazar el CSS original. La siguiente es una introducción simple:<. /p>
Primero, cree un nuevo directorio en src, concretamente theme, para almacenar todos los archivos relacionados con CSS.
preBootstrapCustomizations
Define algunas variables que se pueden usar directamente en la aplicación
preBootstrapCustomizations: ./src/theme/variables.scss
src/theme/variables.scss define principalmente variables relacionadas con los colores
//Define tus propios colores
$cyan: #33e0ff;
$ humildad: #777;
// Variables de arranque
$brand-primary: darken(#428bca, 6.5);
$brand-secundario: #e25139 ;
$brand-success: #5cb85c;
$brand-warning: #f0ad4e;
$brand-danger: #d9534f;
$ brand- información: #5bc0de;
$text-color: #333;
$font-size-base.14px;
$font-family-sans- serif: "Helvetica Neue", Helvetica, sans-serif;
bootstrapCustomizations
Después de cargar preBootstrapCustomizations, todas las variables definidas en preBootstrapCustomizations se pueden usar en él
appStyles
Después de cargar el arranque, los estilos que contiene se cargarán al final. Aquí puede anular algunos estilos de arranque
appStyles: ./src/theme/bootstrap.overrides .scss
src/theme/bootstrap.overrides.scss redefine algunos estilos
.navbar-brand {
posición: relativa;
padding- izquierda: 50px;
}
.navbar-default .navbar-nav gt;active gt;
.navbar-default.gt; : flotar,
.navbar-default .navbar-nav gt; .active gt; a: foco {
color: #33e0ff; : transparente;