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.css
is:
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
Post a Comment