webpack - How to handle png in css with loader -


i'm packaging angular2 project webpack. app.component.ts is:

import { component } '@angular/core'; import '../../public/css/styles.css';  @component({ selector: 'my-app', template:require('./app.component.html'), styles: [require('./app.component.css')] }) export class appcomponent {} 

and css app.component.cssis:

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

and webpack.common.js as:

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'       })    ] }; 

then got error:

browser_adapter.js:84typeerror: t.replace not function     @ function.t.replaceallmapped (http://localhost/vendor.1f7c2e93d172be58c91c.js:64:3487)     @ object.i [as extractstyleurls] (http://localhost/vendor.1f7c2e93d172be58c91c.js:1128:213)     @ http://localhost/vendor.1f7c2e93d172be58c91c.js:1345:4044     @ array.map (native)     @ t.normalizestylesheet (http://localhost/vendor.1f7c2e93d172be58c91c.js:1345:4020)     @ t.normalizeloadedtemplate (http://localhost/vendor.1f7c2e93d172be58c91c.js:1345:2301)     @ t.normalizetemplatesync (http://localhost/vendor.1f7c2e93d172be58c91c.js:1345:1841)     @ t.normalizedirective (http://localhost/vendor.1f7c2e93d172be58c91c.js:1345:1367)     @ t._getcompiledtemplate (http://localhost/vendor.1f7c2e93d172be58c91c.js:1324:2661)     @ t._gettransitivecompiledtemplates (http://localhost/vendor.1f7c2e93d172be58c91c.js:1324:2872) 

my vender.ts example bellow:

// 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 example jquery, lodash or bootstrap // can import js, ts, css, sass, ... 

and have tried 'raw' css, file-loader didn't dear , didn't put icon_background.png asset. , other tried such 'style!css','css','css/locals',loaders: [ 'style-loader', 'css-loader?sourcemap'] fail getting typeerror above.

i found workaround using 'css-to-string-loader!css-loader'


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

python 3.5 - Pyqtgraph string in x tick -