Question

我有一个HomeComponent，通过

加载一个home.css

styleUrls: ['home.css']

home.css

.home {
    background: url('../../img/home.png') no-repeat;
}

（有一条有效路径）

Webpack不会将资产目录中的图像与npm run build捆绑在一起，也不会在启动模式下使用npm start加载它。

webpack.common.js（来自此official Angular2 tutorial）：

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: ['awesome-typescript-loader', '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: 'raw'
            }
        ]
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),

        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ]
};

我也尝试过使用npm install resolve-url帮助构建te dist文件夹文件，但是没有使用npm start（来自教程）构建live dev

...
//instead of the 'raw' loader            
{
    test: /\.css$/,
    include: helpers.root('src', 'app'),
    loaders: ['style','css?sourceMap', 'resolve-url']
 }

Answer 1

您确定已正确配置angular2-template-loader吗？您上面发布的版本似乎存在一些问题（加载程序名称中有一些空格）。但我认为这是因为将源代码粘贴到stackoverflow而你的源代码看起来不像这样。

示例项目的不同之处在于您在styleUrls数组中引用css文件的方式。

您是否可以尝试将文件引用为styleUrls: ['./home.css']而不是styleUrls: ['home.css']之类的相对路径？这可能会影响angular2-template-loader尝试解析文件的方式。

Answer 2

我最终使开发环境工作，并通过简单地更改css＆＃39; raw＆＃39;生成dist文件夹的图像。在webpack.common.js中加载

        {
            test: /\.css$/,
            include: helpers.root('src', 'app'),
            loaders: ['to-string', 'style', 'css?sourceMap']
        }

并安装npm to-string。

在这种情况下，我不需要使用任何resolve-url加载器。

Webpack不会打包Angular2组件样式后台URL

2 个答案: