1

我正在用 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 {}

它的cssapp.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的就像下面的例子：

// 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上述结果而失败。

4

1 回答 1

0

我通过使用 'css-to-string-loader!css-loader' 找到了解决方法

于 2016-08-25T21:03:21.527 回答