3

我有一个问题，我整天都在挠头。我将 Angular 2 与 webpack 和 SASS 一起使用，到目前为止它运行良好，直到我在项目中添加了我的第一个 *.png 图像。

我有以下 webpack 配置：

var webpack = require('webpack');
var LiveReloadPlugin = require('webpack-livereload-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        myapp: './src/main.ts',
        vendor: './src/vendor.ts'
    },
    devtool: 'source-map',
    output: {
        path: '../myapp/assets',
        filename: '/[name].js'
    },
    module: {
        loaders: [
            {
                test: "/\.png$/",
                loader: "url?limit=8096"
            },
            {
                test: /\.ts$/,
                loader: 'ts'
            }, {
                test: /\.html$/,
                loader: 'html?-minimize'
            }, {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader?minimize!sass-loader")
            }
        ]
    },
    tslint: {
        emitErrors: true,
    },
    resolve: {
      extensions: ['', '.js', '.ts']  
    },
    plugins: [
        new ExtractTextPlugin("myapp.css"),
        new webpack.optimize.CommonsChunkPlugin({ name: [ 'myapp', 'vendor']}),
        new LiveReloadPlugin()
    ]
}

当我尝试运行它时，webpack 会生成以下错误：

ERROR in ./src/app/mymod/comp/image.png
    Module parse failed: C:\src\myapp\client\src\app\mymod\comp\image.png Unexpected character '�' (1:0)
    You may need an appropriate loader to handle this file type.
    SyntaxError: Unexpected character '�' (1:0)
        at Parser.pp$4.raise (C:\src\myapp\client\node_modules\acorn\dist\acorn.js:2221:15)
        at Parser.pp$7.getTokenFromCode (C:\src\myapp\client\node_modules\acorn\dist\acorn.js:2756:10)
        at Parser.pp$7.readToken (C:\src\myapp\client\node_modules\acorn\dist\acorn.js:2477:17)
        at Parser.pp$7.nextToken (C:\src\myapp\client\node_modules\acorn\dist\acorn.js:2468:15)
        at Parser.parse (C:\src\myapp\client\node_modules\acorn\dist\acorn.js:515:10)
        at Object.parse (C:\src\myapp\client\node_modules\acorn\dist\acorn.js:3098:39)
        at Parser.parse (C:\src\myapp\client\node_modules\webpack\lib\Parser.js:902:15)
        at DependenciesBlock.<anonymous> (C:\src\myapp\client\node_modules\webpack\lib\NormalModule.js:104:16)
        at DependenciesBlock.onModuleBuild (C:\src\myapp\client\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
        at nextLoader (C:\src\myapp\client\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
        at C:\src\myapp\client\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
        at Storage.provide (C:\src\myapp\client\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:52:20)
        at CachedInputFileSystem.readFile (C:\src\myapp\client\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:140:24)
        at DependenciesBlock.onLoadPitchDone (C:\src\myapp\client\node_modules\webpack-core\lib\NormalModuleMixin.js:255:7)
        at DependenciesBlock.loadPitch (C:\src\myapp\client\node_modules\webpack-core\lib\NormalModuleMixin.js:182:27)
        at DependenciesBlock.doBuild (C:\src\myapp\client\node_modules\webpack-core\lib\NormalModuleMixin.js:241:4)
        at DependenciesBlock.build (C:\src\myapp\client\node_modules\webpack\lib\NormalModule.js:84:14)
        at Compilation.buildModule (C:\src\myapp\client\node_modules\webpack\lib\Compilation.js:126:9)
        at C:\src\myapp\client\node_modules\webpack\lib\Compilation.js:309:10
        at C:\src\myapp\client\node_modules\webpack\lib\NormalModuleFactory.js:58:13
        at NormalModuleFactory.applyPluginsAsyncWaterfall (C:\src\myapp\client\node_modules\tapable\lib\Tapable.js:75:69)
        at onDoneResolving (C:\src\myapp\client\node_modules\webpack\lib\NormalModuleFactory.js:38:11)
        at onDoneResolving (C:\src\myapp\client\node_modules\webpack\lib\NormalModuleFactory.js:121:6)
        at C:\src\myapp\client\node_modules\webpack\lib\NormalModuleFactory.js:116:7
        at C:\src\myapp\client\node_modules\async\lib\async.js:726:13
        at C:\src\myapp\client\node_modules\async\lib\async.js:52:16
        at async.forEachOf.async.eachOf (C:\src\myapp\client\node_modules\async\lib\async.js:236:30)
        at _parallel (C:\src\myapp\client\node_modules\async\lib\async.js:717:9)
        at Object.async.parallel (C:\src\myapp\client\node_modules\async\lib\async.js:731:9)
        at C:\src\myapp\client\node_modules\webpack\lib\NormalModuleFactory.js:109:12
     @ ./~/css-loader?minimize!./~/sass-loader!./src/app/mymod/comp/mycomp.component.scss 6:457-482

和我的 sass 文件：

.my-logo {
    width: 111px;
    height: 120px;
    background-image: url('./image.png')
}

如果我删除背景图像一切正常。

我在 Angular 组件中导入 sass 文件的方式：

@Component({
    selector: "my-comp",
    template: require("./mycomp.component.html"),
    styles: [ require("./mycomp.component.scss").toString() ],
})
export class MyComponent  {
}

我对 Angular 1 应用程序使用了类似的配置，并且它工作了一个。我只是困惑为什么它不适用于此设置。

4

0 回答 0