Question

我正在用webpack打包一个Angular2项目。我的app.component.ts是：

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, ...

我已经尝试过'raw'用于css，但是文件加载器并没有使用它，也没有将icon_background.png放入资产中。其他尝试过的'style!css'，'css'，'css/locals'，loaders: [ 'style-loader', 'css-loader?sourceMap']也因上述TypeError而失败。

Answer 1

我通过使用＆＃39; css-to-string-loader找到了一种解决方法！css-loader＆＃39;

如何使用loader处理css中的png

1 个答案: