javascript - nesting - webpack 4 sass
Webpack-sass loader no puede encontrar imágenes (3)
El doc. Del sass loader dice: "If you''re just generating CSS without passing it to the css-loader, it must be relative to your web root" . Así que hice lo que le digo, tengo mi index.html en la project root mi project root , luego estoy tratando de cargar una image de mi archivo scss . Ahora tengo 2 errores: 1) de Chrome''s console de Chrome''s console : Cannot find module "./img/header.jpg" . 2) desde mi terminal :
ERROR in ./~/css-loader!./~/sass-loader!./~/resolve-url-loader!./public/css/header.scss
Module not found: Error: Cannot resolve ''file'' or ''directory'' ./img/header.jpg in C:/Web-Development/React/Portfolio/public/css
@ ./~/css-loader!./~/sass-loader!./~/resolve-url-loader!./public/css/header.scss 6:64-91
webpack.config.js
module.exports = {
entry: ''./main.jsx'',
output: {
filename: ''./public/js/build/bundle.js''
},
module: {
loaders: [
{
test: //.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: ''babel'',
query: {
presets: [''react'', ''es2015'']
}
},
{
test: //.scss$/,
loaders: ["style", "css", "sass", "resolve-url"]
},
{
test: //.jpg$/,
loader: "file?name=[path][name].[ext]"
}
]
}
};
Si veo mi código, puedo ver claramente que mi css vive dentro de <head> así que señalé el camino de mi imagen a mi raíz, como dice la documentación, pero aún no puedo arreglarlo.
ACTUALIZACIÓN: instalé file-loader y seguí las instrucciones, ahora aparece este error en la consola: GET http://localhost:3000/public/img/header.jpg 404 (Not Found) - jquery.js:9119
Para resolver este problema, he cargado esta configuración extremadamente básica de este paquete web para comenzar mis proyectos, espero que pueda ayudar a todos los que tuvieron este problema. Las sugerencias son todas bienvenidas por supuesto.
Por lo que puedo ver, en realidad estás usando el cargador css ( "style", "css", "sass", "resolve-url" ) (la parte "css" es el "css-loader")
En su (s) archivo (s) sass debe vincular a las imágenes usando una ruta relativa desde el archivo sass que está editando.
styles
- somefile.scss
- another.scss
images
- someImage.jpg
en somefile.scss, debe vincular a su imagen como esta:
background-image: url("../images/someImage.jpg);
Tenga en cuenta que si desea que el paquete web mueva esas imágenes a su carpeta de distribución (si está utilizando un sistema como este), necesitará algo como file-loader de archivos para copiar esos archivos.
Puede usar ignore-loader si sus imágenes ya están en el lugar donde las necesita. el cargador de archivos copiará los archivos a su carpeta de salida.