Webpack URL和文件加载器不支持Angular 2所需的组件样式

Question

我正在构建一个带有角度2,sass和webpack的应用程序,我在每个组件内部需要的sass文件上使用url时遇到麻烦(使用require); 它不会将这些文件复制并将其复制到assets文件夹,也不会将url修改为构建的css样式.当我使用import和html组件中的资源时,它工作正常.

装载机:

        ...{
            test: /\.html$/,
            loader: 'html'
        },
        {
            test: /\.(png|jpe?g|gif)$/,
            loader: 'file?name=assets/[name].[hash].[ext]'
        },
        {
            test: /\.scss/,
            exclude: helpers.root('src', 'app'),
            loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap')
        },
        {
            test: /\.scss$/,
            include: helpers.root('src', 'app'),
            loaders: ['raw', 'resolve-url', 'sass?sourceMap']
        }...

需要款式:

...
styles: [require('./hero-image.scss')]
template: require('./hero-image.component.html')
...

萨斯

...
background: url('../../../public/img/hero-bg.jpg');
...

这里的加载器(构建时)应该将hero-bg.jpg复制到/ assets /并且在构建的css中应该是背景,/assets/hero-bg.jpg但它不会将图像复制到资源文件夹,而css构建的仍然像sass.

注意:当我使用import而不是require(当然修改加载器规则)时,它可以正常工作.在html组件(hero-image.component.html)里面我有这个<img src="../../../public/img/btn-google-play.jpg" />,它也正常工作.

我尝试使用这个角度2启动包,问题也发生了.

谢谢你的帮助,我真的很感激.

编辑:我忘了提到这也发生只使用css(没有sass)并遵循关于webpack的官方角度文档

Answer 1

经过大量的研究和许多尝试后,我发现了一种使用exports-loader的方法,可以轻松更新.

{
   test: /\.scss$/,
   include: helpers.root('src', 'app'),
   loaders: ['exports-loader?module.exports.toString()', 'css', 'sass']
}

感谢@BobSponge的帮助,你引导我朝着正确的方向前进.