Ivan Francisco Barco Perez
Preguntatengo problemas con la carga del componente scss, basicamente me da error de compilacion
aqui el codigo
este es la app.jsx
import React from 'react'; import Header from '../components/Header.jsx'; import '../assets/styles/components/App.scss'; const App = () => ( <div className="App"> <Header /> </div> ); export default App;
index.js
import React from 'react'; import ReactDOM from 'react-dom'; import App from './container/App'; ReactDOM.render( <App />, document.getElementById('app') );
app.scss
body { margin: 0; font-family: 'Muli', sans-serif; background: #8f57fd; } * { box-sizing: border-box; }
header.jsx
import React from 'react'; import '../assets/styles/components/Header.scss' const Header = () => ( <header className="header"> <img className="header__img" src="../assets/logo-platzi-video-BW2.png" alt="Platzi Video" /> <div className="header__menu"> <div className="header__menu--profile"> <img src="../assets/user-icon.png" alt="" /> <p>Perfil</p> </div> <ul> <li><a href="/">Cuenta</a></li> <li><a href="/">Cerrar Sesión</a></li> </ul> </div> </header> ); export default Header;
y header.scss
.header { align-items: center; background: #8f57fd; color: white; display: flex; height: 100px; justify-content: space-between; top: 0px; width: 100%; } .header__img { margin-left: 30px; width: 200px; } .header__menu { margin-right: 30px; } .header__menu ul { display: none; list-style: none; margin: 0px 0px 0px -14px; padding: 0px; position: absolute; width: 100px; text-align: right; } .header__menu:hover ul, ul:hover { display: block; } .header__menu li { margin: 10px 0px; } .header__menu li a { color: white; text-decoration: none; } .header__menu li a:hover { text-decoration: underline; } .header__menu--profile { align-items: center; display: flex; cursor: pointer; } .header__menu--profile img { margin-right: 8px; width: 40px; }
error que me aparece en consola tiene que ver con las lineas de scss
$ npm run start > react-base@1.0.0 start D:\programacion\react\cursopracticoreact\escuela-js > webpack-dev-server --open --mode development i ´¢ówds´¢ú: Project is running at http://localhost:8080/ i ´¢ówds´¢ú: webpack output is served from / i ´¢ówds´¢ú: Content not from webpack is served from D:\programacion\react\cursopracticoreact\escuela-js i ´¢ówdm´¢ú: wait until bundle finished: / ├ù ´¢ówdm´¢ú: Hash: 6d2994d32ca85b5a1b8d Version: webpack 4.44.2 Time: 1247ms Built at: 10/12/2020 11:06:31 AM Asset Size Chunks Chunk Names ./index.html 208 bytes [emitted] bundle.js 1.31 MiB main [emitted] main Entrypoint main = bundle.js [0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js 40 bytes {main} [built] [./node_modules/ansi-html/index.js] D:/programacion/react/CursoPracticoReact/escuela-js/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] D:/programacion/react/CursoPracticoReact/escuela-js/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/container/App.jsx] 298 bytes {main} [built] [./src/index.js] 190 bytes {main} [built] + 32 hidden modules ERROR in ./src/container/App.jsx Module not found: Error: Can't resolve '../assets/styles/components/App.scss' in 'D:\programacion\react\cursopracticoreact\escuela-js\src\container' @ ./src/container/App.jsx 3:0-46 @ ./src/index.js ERROR in ./src/assets/styles/components/Header.scss 2:0 Module parse failed: Unexpected token (2: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 | > .header { | align-items: center; | background: #8f57fd; @ ./src/components/Header.jsx 2:0-49 @ ./src/container/App.jsx @ ./src/index.js Child html-webpack-plugin for "index.html": 1 asset Entrypoint undefined = ./index.html [./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html] 191 bytes {0} [built] i ´¢ówdm´¢ú: Failed to compile.
espero si alguien me puede ayudar, ser lo agradeceria.
José Antonio Torres
Segun reviso el problema esta en el import del archivo app.scss.
En el texto que describes el archivo se llama app.scss pero al momento de invocar ese archivo en app.js lo estas llamando como:
import'../assets/styles/components/App.scss';
Luis Lira
Dice que no puede hacer resolve del archivo .scss, ¿podrías pasar tu configuración de Webpack? También revisa que los nombre sean correctos, JavaScript es case sensitive :)
Ivan Francisco Barco Perez
@luis_liraC aqui este el webpack
const path = require('path'); const HtmlWebPackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, resolve: { extensions: ['.js', '.jsx'], }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', }, }, { test: /\.html$/, use: [ { loader: 'html-loader', }, ], }, ], }, plugins: [ new HtmlWebPackPlugin({ template: './public/index.html', filename: './index.html', }), ], };
@josetorres, es que lo tengo tal cual lo hace el profe en la clase, te refieres que en lugar de app.scss escriba app.css? o cual
sLuis Lira
Te falta agregar los loader de SASS, y de estillos :)
{ test: /\.(scss|css)$/, use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader', 'postcss-loader', 'sass-loader' ] }
Ivan Francisco Barco Perez
@luis, ya lo agregue, por allí va la solución, una cosa, sabes donde se le da la definición al MiniCssExtractPlugin? me sale lo siguiente
ReferenceError: MiniCssExtractPlugin is not defined
gracias por tu tiempo luis (y)
Luis Lira
¿Instalaste el plugin y lo importaste a tu Webpack?
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
Ivan Francisco Barco Perez
si, pero aun sigue indefinido, tambien me recomendaron instalar una version anterior de webpack-cli, por lo que la ultima version del webpack estaba aun muy nueva y daba problemas de compatibilidad. Pero se que el tema va por el webpack
Luis Lira
¿Cuál versión de Webpack tienes instalada? Hace poco se lanzó la versión 5, pero no sé si te haya instalado esa 🤔
Si no, esa configuración debería funcionar perfectamente con la versión 4 de Webpack. ¿podrías poner tu webpack.config para revisarlo? También si publicas tu repo con todo gusto lo reviso :)
Ivan Francisco Barco Perez
@luis, ps un compañero me recomendó instalar la versión 3, que me comento que hizo pruebas con esa version por que es mas estable; y sí, esa versión me dejo resolver algunas cosas que se me había presentado clases anteriores. Me comento el compañero que la versión 4 a el le dio problemas y por eso intentó con la v3 y le funcionó.
Luis Lira
Me parece algo extraño, este curso está hecho con la versión 4 de Webpack y de la 3 a la 4 sí cambian algunas cosas a comparación de lo que se ve en el curso 🤔
Lo bueno es que ya te funcionó y espero que más delante no tengas problemas por eso de la versión porque durante toda la Escuela de JS también harás cambios a ese archivo y todos están hechos con la versión 4.
