Menu

Aprenda cómo incluir CoreUI en su proyecto usando Webpack 3.

Que es CoreUI

CoreUI es una plantilla de administrador de Bootstrap de código abierto. Sin embargo, es más que una plantilla de administración, CoreUI se construye como su propia versión extendida de Bootstrap.

La plantilla se basa en los componentes y marcos web más populares, incluyendo Bootstrap 4, SASS, Bower y Grunt. La plantilla CoreUI tiene muchas características únicas y más de 1000 iconos de alta calidad.

También funciona con muchos frameworks populares y bibliotecas como Laravel, Symfony, RoR, Django, Angular o React, etc. Con CoreUI puede personalizar su proyecto para casi cualquier dispositivo (Mobile, Web o WebApp). Para hacer una larga historia corta, este Bootstrap 4 Admin Template es perfecto para la creación de grandes interfaces de usuario.

CoreUI es una plantilla de administrador de Bootstrap de código abierto. La plantilla se basa en los componentes y marcos web más populares, incluyendo Bootstrap 4, SASS, Bower y Grunt.

 

Instalando CoreUI

Instale CoreUI como un módulo Node.js usando npm.

Dupdo

npm install @coreui/coreui

Importando JavaScript

Importe JavaScript de CoreUI agregando esta línea al punto de entrada de su aplicación (generalmente index.jso app.js):

Dupdo

import ‘coreui’;

Alternativamente, puede importar complementos individualmente según sea necesario:

Dupdo

import ‘coreui/js/dist/ajax-load’;import ‘coreui/js/dist/sidebar’;…

CoreUi depende de Bootstrap , jQuery y Popper , se definen como peerDependencies, esto significa que tendrá que asegurarse de agregar ambos a su package.jsonuso npm install –save bootstrap jquery popper.js.

Tenga en cuenta que si elige importar complementos individualmente , también debe instalar exports-loader

Importando estilos

Importando Sass precompilado

Para disfrutar de todo el potencial de CoreUI y personalizarlo según sus necesidades, use los archivos de origen como parte del proceso de agrupación de su proyecto.

Primero, cree el suyo propio _custom.scssy utilícelo para anular las variables personalizadas incorporadas. Luego, use su archivo Sass principal para importar sus variables personalizadas, seguido de CoreUI:

Dupdo

@import “custom”;@import “~coreui/scss/coreui”;

Para que CoreUI compile, asegúrese de instalar y usar los cargadores necesarios: sass-loader , postcss-loader con Autoprefixer . Con una configuración mínima, la configuración de su paquete web debe incluir esta regla o similar:

Dupdo

…  {    test: /\.(scss)$/,    use: [{      loader: ‘style-loader’, // inject CSS to page    }, {      loader: ‘css-loader’, // translates CSS into CommonJS modules    }, {      loader: ‘postcss-loader’, // Run post css actions      options: {        plugins: function () { // post css plugins, can be exported to postcss.config.js          return [            require(‘precss’),            require(‘autoprefixer’)          ];        }      }    }, {      loader: ‘sass-loader’ // compiles Sass to CSS    }]  },  …

Importando CSS Compilado

Alternativamente, puede usar el CSS listo para usar de CoreUI simplemente agregando esta línea al punto de entrada de su proyecto:

Dupdo

import ‘coreui/dist/css/coreui.min.css’;

En este caso, puede utilizar la regla existente para css, sin ninguna modificación especial a config webpack, excepto que no es necesario sass-loadersimplemente estilo-loader y css-loader .

 

…  module: {    rules: [      {        test: /\.css$/,        use: [‘style-loader’, ‘css-loader’]      }    ]  }  …

 

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *