svelte-material-ui Svelte Themes

Svelte Material Ui

Guia de instalacion de un proyecto svelte integrando material-ui

GUIA DE INSTALACION DE SVELTE PARA QUE FUNCIONE SVELTE-MATERIAL-UI Bibliografia y enlaces de interes Video paso a paso para realizar la instalacion descripta mas abajo --> https://youtu.be/k9hyeORWSTA Pagina oficial de svelte --> https://svelte.dev/ Pagina del proyecto svelte-material-ui (github) --> https://github.com/hperrin/svelte-material-ui Pagina con los componentes y ayudas de codigo de svelte-material-ui --> https://sveltematerialui.com/

Primero instalamos svelte con el comando --> npx degit sveltejs/template svelte-smui

Luego instalamos la libreria de material-ui --> npm i --save-dev svelte-material-ui

Luego instalamos path --> npm i --save-dev path

Instalamos sass --> npm i --save-dev node-sass

Instalamos rollup postcss --> npm i --save-dev rollup-plugin-postcss

Realizamos una instalacion general --> npm install

Agregamos en rollup.config.js la siguiente configuracion Primero importamos path --> import path from 'path';

Luego importamos postcss
    --> import postcss from 'rollup-plugin-postcss';

Luego de la linea "const production = !process.env.ROLLUP_WATCH;" agregamos el siguiente codigo

    const postcssOption = () => ({
        extensions:['.scss', '.sass'],
        extract: false,
        minimize:true,
        use: [
            ['sass', {
                includePaths: [
                    './src/theme',
                    './node_modules',
                    // This is only needed because we're using a local mo...
                    // Normally, you would not need this line.
                    path.resolve(__dirname, '..', 'node_modules')
                ]
            }]
        ]
    })

En plugins luego de svelte agregamos el siguiente plugins
    --> postcss(postcssOption()),

En la carpeta src agregamos una carpeta para themes y dentro un archivo nuevo. Quedando de la siguiente manera --> src |--theme |--_smui-theme.scss

Una vez creado el archiv scss solo se cierra. Notar que el nombre comienza con guion bajo "_"

Ejecutamos la aplicacion para verificar que no existen errores y que la misma es desplegada con el siguiente comando --> npm run dev

Abrimos el componente App.svelte --> realizamos el import de un componente de tipo Button de la siguiente manera en la seccion de