SASS文件中的角2和Webpack - url()即使使用解析url-加载程序也不能解析。

Question

我从这份官方指南开始了我的第二个Webpack项目。

我继续跑npm install --save-dev node-sass sass-loader resolve-url-loader。进展得很好。

我的组件位于root/src/app/mycomponent/mycomponent.ts，我在标题中引用我的scss：

@Component({
    selector: 'home',
    templateUrl: './mycomponent.html',
    styleUrls: ['./mycomponent.scss']
})

scss文件位于root/src/app/mycomponent/mycomponent.scss，我在其中有以下SASS：

p{
    color: blue;
    background-image: url('./background.jpg');
}

这张照片就在root/src/app/mycomponent/background.jpg。

在webpack.common.js中，我对.scss文件有以下规则：

{
   test: /\.scss$/,
   exclude: 'node_modules',
   loaders:  ['style-loader','css-loader','resolve-url-loader','sass-loader?sourceMap']
}

正如解析-url-加载器文档推荐的那样。

我一直在犯这个错误：

找不到./~/css-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?sourceMap!./src/app/mycomponent/mycomponent.scss模块中的错误:错误:无法解决‘./back背景.Can’

我甚至尝试过loaders: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader!sass-loader?sourceMap!resolve-url-loader'})，但仍然会遇到同样的错误。

为了我的生命，我不知道我做错了什么。我的印象是，解析-url-加载程序将允许我在SASS url() 中相对于它在！中声明的.scss文件放置一个位置，即background.jpg与我的.scss文件位于同一个文件夹中，因此我认为我正确地引用了路径。

我在网上搜索过，似乎没有人有正确的解决方案。我还需要出示其他代码吗？请帮帮我！请注意，我不想从.ts导入或要求图像文件。

更新

结果，我拼错了图像的文件名。现在，我不明白“模块找不到”错误。

然而，，但是，我现在得到浏览器控制台输出中的错误:期望‘’是一个字符串数组。这是与配置

loaders: ['style-loader','css-loader','resolve-url-loader','sass-loader?sourceMap']

还是卡住了。

Answer 1

根据错误消息，角是在解析代码时期望资产是字符串的。因此，在这种情况下，我们需要另一个加载程序：

npm install --save-dev css-to-string-loader

然后在webpack配置文件中：

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['css-to-string-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
},

现在该走了。

Answer 2

我设法通过使用“导出-加载程序”而不是“样式-加载程序”来传递这个问题。

例：'exports-loader?module.exports.toString()'