-
check_circle_outlineMódulo 1 | 5 clases
Introducción y configuración
expand_more -
check_circle_outlineMódulo 2 | 5 clases
Webpack
expand_more -
check_circle_outlineMódulo 3 | 5 clases
Layout
expand_more -
check_circle_outlineMódulo 4 | 10 clases
Estilos con SASS
expand_more-
done_all
Clase 1
Variables
-
done_all
Clase 2
Mixins
-
done_all
Clase 3
Selectores anidados
-
done_all
Clase 4
Funciones de color y otros
-
done_all
Clase 5
Botón animado
-
done_all
Clase 6
Trabajando con tipografía
-
done_all
Clase 7
Parallax Background
-
done_all
Clase 8
Extender mixins
-
done_all
Clase 9
Pseudo elementos y selectores de conjuntos
-
done_all
Clase 10
Centrar elementos con margen
-
-
check_circle_outlineMódulo 5 | 9 clases
Slider de productos
expand_more -
check_circle_outlineMódulo 6 | 3 clases
Google Maps
expand_more -
check_circle_outlineMódulo 7 | 4 clases
Navegación
expand_more -
check_circle_outlineMódulo 8 | 5 clases
Service Workers (páginas sin internet)
expand_more -
check_circle_outlineMódulo 9 | 4 clases
Subir a producción
expand_more -
check_circle_outlineMódulo 10 | 2 clases
Despedida
expand_more
9 comentario(s)
Estaba dandome error el sass cuando ponia en el CSS:
background-image: url('../../public/images/secondimage.jpg');
La solución es instalar file loader: npm install --save-dev file-loader
En el archivo: webpack.config.js
Hay que añadir:
{
test: /\.(png|jpg)$/,
loader: 'file-loader'
}
ERROR in ./assets/css/app.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import './modules/_variables.scss';
| @import './modules/_mixins.scss';
| @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700&display=swap');
@ ./assets/index.js 1:0-24
Si utilizo pr ejemplo una imagen extension PNG, tendría que crear un rega nueva o ajusatr la expresión regular?
Primer paso
npm install url-loader
segundo paso, agregar esta regla al archivo webpack.config.js
{
test: /\.jpg$/,
loader: 'url-loader'
}
finalmente npm run start
Hola, al agregar la ruta en el background-image del parallax me arroja el siguiente error (el cuál supongo que es por la configuración de scss en webpack o del html-webpack-pluguin).No sé bien como solucionarlo:
ERROR in ./public/images/notebook-phone-workspace.jpg Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file) @ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./assets/css/app.scss 7:1931-1990 @ ./assets/css/app.scss @ ./assets/javascript/entry.js @ multi (webpack)-dev-server/client?http://localhost:8080 ./assets/javascript/entry.js Child html-webpack-plugin for "index.html": 1 asset 4 modules webpack: Failed to compile.
Clase 22