Webpack url 和文件加载器不适用于 Angular 2 所需的组件样式

Question

我正在使用 Angular 2、sass 和 webpack 构建一个应用程序，但我在每个组件中需要的 sass 文件的 url 上遇到了问题（使用 require）；它不会将这些文件复制到 assets 文件夹，也不会将 url 修改为已构建的 css 样式。 当我使用导入和 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 构建仍然像粗鲁。

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

我尝试使用this angular 2 starter pack，问题也发生了。

感谢您的帮助，我真的很感激。

编辑：我忘了提到这也发生在仅使用 css（没有 sass）并遵循 official angular documentation about webpack

Answer 1

在 Angular 文档中看起来像不正确的配置示例。

这两个加载器都不会在 css 中处理 url() 并将资产发布到目标文件夹：'raw', 'resolve-url', 'sass'。 尽管有这个名字，resolve-url loader 只是将相对 url 替换为适合 css-loader。

因此，您应该将css-loader 添加到最后一个 scss 加载器的配置中：

{
   test: /\.scss$/,
   include: helpers.root('src', 'app'),
   loaders: ['css', 'resolve-url', 'sass?sourceMap']
}

样式要求将更改为：

styles: [require('./hero-image.scss').toString()]

---

来自docs： @import 和 url(...) [在 css 文件中] 被解释为 require() 并将由 css-loader 解析。

Answer 2

经过大量研究和多次尝试，我找到了一种使用 exports-loader 的方法，该方法有效且可以轻松更新。

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

感谢@BobSponge 的帮助，你指引我朝着正确的方向前进。

Answer 3

exports-loader?module.exports.toString() 的替代方法是使用css-loader readme 中提到的to-string-loader