Webpack url和文件加载器不适用于Angular 2所需的组件样式 [英] Webpack url and file loaders don't working on Angular 2 required component styles

问题描述

我正在构建一个带有angular 2，sass和webpack的应用程序，并且遇到了每个组件内部必需的sass文件的url的麻烦(使用require)；它不会将这些文件复制到资产文件夹，也不会将网址修改为内置的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仍然像ass.

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

我尝试使用这个有角度的2入门包，该问题也会发生.

非常感谢您.

我忘了提到，仅使用css(不使用sass)并遵循有关webpack的正式角度文档

解决方案

经过大量研究和尝试，我发现了使用 exports-loader 可以正常工作，并且可以轻松更新.

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

感谢@BobSponge的帮助，您以正确的方向指导了我.

I’m building an app with angular 2, sass and webpack and I’m having troubles with url on sass files that are required inside each component (using require); it doesn’t take those files and copy it to assets folder and don’t modify the url to the builded css styles. It work's correctly when I use import and with the assets inside html component's.

loaders:

        ...{
            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']
        }...

Require styles:

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

Sass

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

Here the loaders (when build) should copy hero-bg.jpg to /assets/ and in the builded css the background should be /assets/hero-bg.jpg but it doesn't copy the image to assets folders and css builded remains like the sass.

NOTE: When I use import instead of require (modifying the loaders rules of course) at this point it works correctly. Inside the html component (hero-image.component.html) I have this <img src="../../../public/img/btn-google-play.jpg" /> and it work's correctly too.

I try with this angular 2 starter pack and the issue also happens.

Thanks for helping, I really appreciate it.

Edit: I forgot to mention that this also happens using only css (without sass) and following the official angular documentation about webpack

解决方案

After a lot of research and many attempts I found an approach using the exports-loader that work's and can be easily updated.

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

Thanks @BobSponge for your help, you guided me in the right direction.

这篇关于Webpack url和文件加载器不适用于Angular 2所需的组件样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！