如何用加載程序在css中處理png

我正在用webpack打包一個Angular2項目。我app.component.ts是：如何用加載程序在css中處理png

import { Component } from '@angular/core'; 
import '../../public/css/styles.css'; 

@Component({ 
selector: 'my-app', 
template:require('./app.component.html'), 
styles: [require('./app.component.css')] 
}) 
export class AppComponent {}

而且它的CSS app.component.css是：

main { 
    padding: 1em; 
    font-family: Arial, Helvetica, sans-serif; 
    text-align: center; 
    margin-top: 50px; 
    display: block; 
    background: url("../../public/images/icon_background.png"); 
}

而且我webpack.common.js是：

var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var helpers = require('./helpers'); 

module.exports = { 
entry: { 
    'polyfills': './src/polyfills.ts', 
    'vendor': './src/vendor.ts', 
    'app': './src/main.ts' 
}, 

resolve: { 
    extensions: ['', '.js', '.ts'] 
}, 

module: { 
    loaders: [ 
     { 
      test: /\.ts$/, 
      loaders: ['ts', 'angular2-template-loader'] 
     }, 
     { 
      test: /\.html$/, 
      loader: 'html' 
     }, 
     { 
      test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
      loader: 'file?name=assets/[name].[hash].[ext]' 
     }, 
     { 
      test: /\.css$/, 
      exclude: helpers.root('src', 'app'), 
      loader: ExtractTextPlugin.extract('style', 'css?sourceMap') 
     }, 
     { 
      test: /\.css$/, 
      include: helpers.root('src', 'app'), 
      loader: 'css/locals?module&localIdentName= [name]__[local]___[hash:base64:5]' 
      } 
     ] 
}, 

plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
     name: ['app', 'vendor', 'polyfills'] 
     }), 

     new HtmlWebpackPlugin({ 
     template: 'src/index.html' 
     }) 
    ] 
};

然後我得到了一個錯誤：

browser_adapter.js:84TypeError: t.replace is not a function 
    at Function.t.replaceAllMapped (http://localhost/vendor.1f7c2e93d172be58c91c.js:64:3487) 
    at Object.i [as extractStyleUrls] (http://localhost/vendor.1f7c2e93d172be58c91c.js:1128:213) 
    at http://localhost/vendor.1f7c2e93d172be58c91c.js:1345:4044 
    at Array.map (native) 
    at t.normalizeStylesheet (http://localhost/vendor.1f7c2e93d172be58c91c.js:1345:4020) 
    at t.normalizeLoadedTemplate (http://localhost/vendor.1f7c2e93d172be58c91c.js:1345:2301) 
    at t.normalizeTemplateSync (http://localhost/vendor.1f7c2e93d172be58c91c.js:1345:1841) 
    at t.normalizeDirective (http://localhost/vendor.1f7c2e93d172be58c91c.js:1345:1367) 
    at t._getCompiledTemplate (http://localhost/vendor.1f7c2e93d172be58c91c.js:1324:2661) 
    at t._getTransitiveCompiledTemplates (http://localhost/vendor.1f7c2e93d172be58c91c.js:1324:2872)

我vender.ts是一樣的example波紋管：

// Angular 2 
import '@angular/platform-browser'; 
import '@angular/platform-browser-dynamic'; 
import '@angular/core'; 
import '@angular/common'; 
import '@angular/http'; 
import '@angular/router'; 
// RxJS 
import 'rxjs'; 
// Other vendors for example jQuery, Lodash or Bootstrap 
// You can import js, ts, css, sass, ...

我試圖對CSS的「原始」，但該文件加載器沒有親愛的它並沒有把icon_background.png成資產。和其他嘗試，如'style!css','css','css/locals',loaders: [ 'style-loader', 'css-loader?sourceMap']也通過得到TypeError如上所述失敗。

來源

2016-08-24 Xiaoxi Zhang

我發現了一個解決方法，使用'css-to-string-loader！css-loader'

來源

2016-08-25 21:03:21

如何用加載程序在css中處理png

回答

相關問題