2015-11-28 20 views
20

Il documento sass loader dice: "If you're just generating CSS without passing it to the css-loader, it must be relative to your web root". Così ho fatto come dice, ho il mio index.html nel mio project root, quindi sto cercando di caricare un image dal mio file scss. Ora ho 2 errori: 1) da Chrome's console: Cannot find module "./img/header.jpg". 2) dalle mie terminal:Webpack - caricatore sass non trova immagini

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]" 
      } 
     ] 
    } 
}; 

Se vedo il mio codice, posso vedere chiaramente che il mio css vive dentro <head> così ho sottolineato la mia immagine di percorso alla mia radice, come dice la documentazione, ma ancora non è in grado di risolverlo.

UPDATE: Ho installato file-loader e seguito le istruzioni, ora ottengo questo errore nella console: GET http://localhost:3000/public/img/header.jpg 404 (Not Found) - jquery.js:9119

+0

Il problema potrebbe essere con la directory bower_components forse? Ho avuto un problema simile qui con i caratteri: http://stackoverflow.com/questions/33733370/webpack-cannot-load-fonts-from-bower-using-css-scss – Zorgatone

risposta

0

Per risolvere questo problema ho caricato questo webpack extremly basic configuration per avviare i miei progetti, spero che possa aiutare tutti coloro che hanno avuto questo problema. I suggerimenti sono tutti benvenuti, naturalmente.

6

Per quanto posso vedere in realtà si sta utilizzando il caricatore css ("style", "css", "sass", "resolve-url") (il la parte "css" è "css-loader")

Nei file sass è necessario collegarsi alle immagini utilizzando un percorso relativo dal file sass che si sta modificando.

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

in somefile.scss, si dovrebbe collegare alla vostra immagine in questo modo:

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

nota impegno, che se si vuole webpack per spostare le immagini nella cartella di distribuzione (se si è usando un sistema come questo) avrete bisogno di qualcosa come file-loader per copiare quei file.

+0

Ho provato a puntare il mio file scss a la mia cartella img sta facendo url (../img/header.jpg) ma questa volta ho ricevuto questo altro errore: ERRORE in ./public/img/header.jpg Errore del modulo fallito: C: \ Sviluppo Web \ React \ Portfolio \ public \ img \ header.jpg Riga 1: Token imprevisto ILLEGAL Potrebbe essere necessario un caricatore appropriato per gestire questo tipo di file. (codice sorgente omesso per questo file binario) @ ./~/css-loader!./~/sass-loader!./~/resolve-url-loader!./public/css/header.scss 6:64 -92 –

+0

Ecco perché è necessario il caricatore di file. Proprio come per i tuoi file scss, devi specificare un test e un caricatore (in questo caso il caricatore di file) –

+0

Ok, ho aggiunto '{test: /\.jpg$/, loader:" file? Name = [ percorso] [nome]. [ext] "}" nel mio webpack.config.js ma ora nella console di Chrome ottengo un errore diverso: 'OTTIENI http: // localhost: 3000/public/img/header.jpg 404 (Not Trovato) - jquery.js: 9119'. Mi spiace per tutte queste domande, ho appena iniziato in questi giorni per utilizzare tutti questi strumenti –

1

È possibile utilizzare ignore-loader se le immagini sono già nel posto in cui sono necessarie. il caricatore di file copierà i file nella cartella di output.

Problemi correlati