I caricatori di file e URL Webpack non funzionano sugli stili di componente Angular 2

Question

Sto creando un'applicazione con angular 2, sass e webpack e sto riscontrando problemi con l'url sui file sass richiesti all'interno di ciascun componente (utilizzando richiedono); non prende quei file e li copia nella cartella delle risorse e non modifica l'url degli stili css creati. Funziona correttamente quando uso l'importazione e con le risorse all'interno del componente html.

caricatori:

 ...{ 
      test: /\.html$/, 
      loader: 'html' 
     }, 
     { 
      test: /\.(png|jpe?g|gif)$/, 
      loader: 'file?name=assets/[name].[hash].[ext]' 
     }, 
     { 
      test: /\.scss/, 
      exclude: helpers.root('src', 'app'), 
      loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap') 
     }, 
     { 
      test: /\.scss$/, 
      include: helpers.root('src', 'app'), 
      loaders: ['raw', 'resolve-url', 'sass?sourceMap'] 
     }... 

Richiede stili:

... 
styles: [require('./hero-image.scss')] 
template: require('./hero-image.component.html') 
... 

Sass

... 
background: url('../../../public/img/hero-bg.jpg'); 
... 

Qui i caricatori (quando build) dovrebbe copiare eroe-bg.jpg a/attività/e nel css costruito lo sfondo dovrebbe essere /assets/hero-bg.jpg ma non copia l'immagine in cartelle di risorse e creazione di css ed rimane come il sass.

NOTA: Quando utilizzo l'importazione anziché richiedere (modificando ovviamente le regole dei caricatori) a questo punto funziona correttamente. All'interno del componente html (hero-image.component.html) ho questo <img src="../../../public/img/btn-google-play.jpg" /> e funziona anche correttamente.

Provo con this angular 2 starter pack e il problema si verifica anche.

Grazie per l'aiuto, lo apprezzo molto.

Edit: Ho dimenticato di dire che questo accade anche utilizzando solo i CSS (senza sass) e seguendo la official angular documentation about webpack

Answer 1

Dopo molte ricerche e molti tentativi ho trovato un approccio utilizzando il exports-loader di quel lavoro e può essere facilmente aggiornato.

{ 
    test: /\.scss$/, 
    include: helpers.root('src', 'app'), 
    loaders: ['exports-loader?module.exports.toString()', 'css', 'sass'] 
} 

Grazie a @BobSponge per il vostro aiuto, mi avete guidato nella giusta direzione.

Answer 2

assomiglia errato esempio config nella documentazione angolari.

Nessuno di questi caricatori processa url() in css e pubblica le risorse nella cartella di destinazione: 'raw', 'resolve-url', 'sass'. Nonostante il nome, il caricatore resolve-url sostituisce solo gli url relativi a css-loader.

Quindi, si dovrebbe aggiungere css-loader al config all'ultimo SCSS del caricatore:

{ 
    test: /\.scss$/, 
    include: helpers.root('src', 'app'), 
    loaders: ['css', 'resolve-url', 'sass?sourceMap'] 
} 

stili richiedono sarà cambiato in:

styles: [require('./hero-image.scss').toString()] 

---

Da docs: @import e url(...) [in css file] sono interpretati come require() e verranno risolti dallo css-loader.

Answer 3

Un'alternativa a exports-loader?module.exports.toString() è quella di utilizzare il to-string-loader menzionato nel css-loader readme