Question

我从this official guide开始了我的Angular 2 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']
}

根据resolve-url-loader documentation的建议。

我继续收到此错误：

错误在./~/css-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?sourceMap！。/ src / app / mycomponent / mycomponent.scss 找不到模块：错误：无法解析'./background.jpg'

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

对于我的生活，我无法弄清楚我做错了什么。我的印象是resolve-url-loader会让我在SASS url（）中放置一个相对于它声明的.scss文件的位置！那background.jpg与我的文件放在同一个文件夹中.scss文件，所以我认为我正确引用了路径。

我搜索了SO和网络，没有人似乎有正确的解决方案。我需要显示其他代码吗？请帮忙！请，我不想导入或要求.ts。

中的图像文件

更新

事实证明我错误拼写了图片文件名的名称。现在，我没有得到“模块未找到”错误。

HOWEVER 我现在在浏览器的控制台输出中得到错误：预期的'styles'是一个字符串数组。这是配置

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

仍然坚持。

Answer 1

根据错误消息，Angular在解析代码时期望资产成为字符串。因此，在这种情况下，我们需要另一个装载机：

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'代替'style-loader'

来传递这个问题

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

即使使用resolve-url-loader，SASS文件中的Angular 2和Webpack - url（）也无法解析

2 个答案: