Luis Fernando Cruz Carrillo
Preguntastudent•hace 5 años
Hola a mí no me carga los estilos del archivo App.scss, pero tampoco me da un error. Tengo un deshabilitado el caché del navegador, estoy usando Firefox.
# Output npm $ npm run start 130 ↵ > PlatziVideo@1.0.0 start /home/quattroc/Documentos/platzi/escuelaJavascript/Curso_practico_React_js/PlatziVideo > webpack-dev-server --open --mode development ℹ ｢wds｣: Project is running at http://localhost:8080/ ℹ ｢wds｣: webpack output is served from / ℹ ｢wds｣: Content not from webpack is served from /home/quattroc/Documentos/platzi/escuelaJavascript/Curso_practico_React_js/PlatziVideo ℹ ｢wdm｣: wait until bundle finished: / ℹ ｢wdm｣: Hash: ba478fce4243f6f0cf29 Version: webpack 4.44.2 Time: 1928ms Built at: 29/09/2020 7:40:33 Asset Size Chunks Chunk Names ./index.html 258 bytes [emitted] assets/index.html 48 bytes main [emitted] main bundle.js 3.21 MiB main [emitted] main Entrypoint main = assets/index.html bundle.js [0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js 40 bytes {main} [built] [./node_modules/ansi-html/index.js] 4.16 KiB {main} [built] [./node_modules/react-dom/index.js] 1.33 KiB {main} [built] [./node_modules/react/index.js] 190 bytes {main} [built] [./node_modules/strip-ansi/index.js] 161 bytes {main} [built] [./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built] [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built] [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built] [./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built] [./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built] [./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built] [./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built] [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built] [./src/components/HelloWorld.jsx] 191 bytes {main} [built] [./src/index.js] 327 bytes {main} [built] + 32 hidden modules Child HtmlWebpackCompiler: 1 asset Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0 [./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html] 303 bytes {HtmlWebpackPlugin_0} [built] Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!src/assets/styles/App.scss: Entrypoint mini-css-extract-plugin = * [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/styles/App.scss] 546 bytes {mini-css-extract-plugin} [built] [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built] ℹ ｢wdm｣: Compiled successfully.
// webpack.config.js import React from 'react' import '../assets/styles/App.scss' const Hello = () => ( <h1>Hello World!</h1> ) export default Hello
// src/components/HelloWorld.jsx import React from 'react' import '../assets/styles/App.scss' const Hello = () => ( <h1>Hello World!</h1> ) export default Hello
Sneyder Barreto
student•hace 5 años
Genial, suele pasar que no nos fijamos en pequeños detalles como ese. 😉
Luis Fernando Cruz Carrillo
student•hace 5 años
Ya quedó, estaba mal en lo siguiente:
new MiniCssExtractPlugin({ filename: 'assets/index.html' })
Tenía ceguera de taller. Muchas gracias por tu apoyo sneyderdev.
Luis Fernando Cruz Carrillo
student•hace 5 años
Hola aquí la configuración de Webpack
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, devtool: 'inline-source-map', resolve: { extensions: ['.js', '.jsx'] }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: [ { loader: 'babel-loader' } ] }, { test: /\.html$/, use: [ { loader: 'html-loader' } ] }, { test: /\.(s*)css$/, use: [ { loader: MiniCssExtractPlugin.loader, }, 'css-loader', 'sass-loader' ] } ] }, plugins: [ new HtmlWebpackPlugin({ template: './public/index.html', filename: './index.html' }), new MiniCssExtractPlugin({ filename: 'assets/index.html' }) ] }
Sneyder Barreto
student•hace 5 años
¡Hola! Asegúrate de tener bien la configuración de webpack y las rutas de tus archivos. Veo que no compartiste la configuración, si pudieras compartirla sería de mucha ayuda. Quedo pendiente a tus comentarios. Un saludo.
