web-dev-qa-db-fra.com

Webpack - Sass Loader ne trouve pas d'images

Le document sass loader Dit: "If you're just generating CSS without passing it to the css-loader, it must be relative to your web root". J'ai donc fait comme il le dit, j'ai mon index.html Dans mon project root, Puis j'essaie de charger un image à partir de mon scss fichier. J'ai maintenant 2 erreurs: 1) de Chrome's console: Cannot find module "./img/header.jpg". 2) de mon 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 je vois mon code, je peux clairement voir que mon CSS vit à l'intérieur de <head> J'ai donc indiqué le chemin de mon image vers ma racine, comme le dit la documentation, mais je ne peux toujours pas le réparer.

MISE À JOUR: J'ai installé file-loader Et suivi les instructions, maintenant je reçois cette erreur dans la console: GET http://localhost:3000/public/img/header.jpg 404 (Not Found) - jquery.js:9119

javascriptcssnode.jswebpacksass-loader
20
Luca Mormile

Pour résoudre ce problème, j'ai téléchargé ceci configuration extrêmement basique du webpack pour démarrer mes projets, j'espère que cela peut aider tous ceux qui ont eu ce problème. Bien entendu, les suggestions sont les bienvenues.

1
Luca Mormile

Autant que je sache, vous utilisez en fait le chargeur css ("style", "css", "sass", "resolve-url") (La partie "css" est le "css-loader")

Dans votre ou vos fichiers sass, vous devez créer un lien vers les images en utilisant un chemin relatif à partir du fichier sass que vous modifiez.

styles
 - somefile.scss
 - another.scss
images
 - someImage.jpg

dans somefile.scss, vous devez créer un lien vers votre image comme ceci:

background-image: url("../images/someImage.jpg);

Notez que si vous voulez que webpack déplace ces images vers votre dossier de distribution (si vous utilisez un système comme celui-ci), vous aurez besoin de quelque chose comme file-loader Pour copier ces fichiers.

6
Wout De Rooms

Vous pouvez utiliser ignore-loader si vos images sont déjà à l'endroit où vous en avez besoin. le chargeur de fichiers copiera les fichiers dans votre dossier de sortie.

1
Lukas Winter