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构建的遗骸像萨斯一样。

注意：当我使用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

经过大量研究和多次尝试后，我发现使用exports-loader的方法可以轻松更新。

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

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

Answer 2

在Angular docs中看起来不正确的配置示例。

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

因此，您应该将css-loader添加到最后一个scss loader的config：

{
   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 3

exports-loader?module.exports.toString()的替代方法是使用to-string-loader

中提到的css-loader readme

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

3 个答案: