的WebPack URL和文件裝載機不要角2種所需組件樣式的工作

我建設具有角2，青菜和的WebPack一個應用程序，我有與所需的每個組件內青菜文件網址的煩惱（使用要求）;它不會將這些文件複製到assets文件夾中，也不會將url修改爲構建的CSS樣式。當我使用import和html組件內的資源時，它工作正常。的WebPack URL和文件裝載機不要角2種所需組件樣式的工作

裝載機：

 ...{ 
      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'] 
     }...

要求款式：

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

薩斯

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

這裏的裝載機（編譯時）應該複製英雄bg.jpg到/資產/和在構建的CSS背景應該是/assets/hero-bg.jpg，但它不會將圖像複製到資源文件夾和CSS構建ed仍然像sass一樣。

注意：當我使用導入而不是require（當然修改加載器規則）在這一點上它工作正常。在html組件（hero-image.component.html）裏面我有這個<img src="../../../public/img/btn-google-play.jpg" />，它的工作也是正確的。

我嘗試用this angular 2 starter pack和問題也會發生。

感謝您的幫助，我真的很感激。

編輯：我忘了提，這也恰好只使用CSS（無SASS）並按照official angular documentation about webpack

來源

2016-05-23 David Velásquez Usuga

了大量的研究和多次嘗試後，我發現了一個方法使用作品的，並可以很容易地更新exports-loader。

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

感謝@BobSponge爲您的幫助，您引導我朝着正確的方向前進。

來源

2016-05-26 01:03:43

謝謝大衛！我很高興我經過幾個小時的嘗試解決方案後發現這不起作用=） – rjmarques

看起來像角文檔不正確配置的例子。

這兩個加載程序都沒有在css中處理url()並將資源發佈到目標文件夾：'raw', 'resolve-url', 'sass'。儘管名字，resolve-url裝載機剛剛更換相對URL適合css-loader。

所以，你應該添加css-loader最後SCSS加載器的配置：

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

樣式要求將變更爲：

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

從docs： @import和url(...) [在CSS文件]被解釋爲require()，並將由解決。

來源

2016-05-24 06:49:58

它不工作:(提到to-string-loader，這打破了生成的樣式，因爲添加的JS的原始代碼裏面'module.exports =「出口=模塊.exports = require（...' –

對不起，沒有注意到'css-loader'產生的不是普通的css，而是嘗試去掉''raw''。 –

不行，因爲角度樣式接收的是字符串數組，嘗試渲染時出現錯誤 –

到exports-loader?module.exports.toString()另一種方法是使用在css-loader readme

來源

2017-07-27 06:49:32 Axel

儘管此鏈接可能回答此問題，但僅在Stack Overflow上僅鏈接回答，您可以通過獲取鏈接的重要部分來改進此答案，把它放入你的答案，這確保你的答案仍然是一個答案，如果鏈接被改變或刪除:) – WhatsThePoint

的WebPack URL和文件裝載機不要角2種所需組件樣式的工作

回答

相關問題