Question

我目前正在使用webpack处理Angular 2项目。

我使用的配置与 https://angular.io/docs/ts/latest/guide/webpack.html#!#loaders

我有一个应用程序范围的文件scss（styles.scss），位于./public/scss/styles.scss中，在webpacking之后在我的index.html中正确链接。

<link href="/app.27a803de076ae294258e.css" rel="stylesheet">

其他scss文件（位于src / app中）是组件范围的样式，它们通过原始加载器作为字符串加载，并在＆＃34; style＆＃34;中内联。标签

SVG文件通过文件加载器进行管理，它们被复制到＆＃34;资产＆＃34;输出文件夹，并使用哈希重命名。

由于未知原因，组件范围样式中提到的所有svg文件都通过＆＃39; url（）＆＃39;应用程序找不到，就好像在webpack步骤中不需要它们一样。它们不会出现在输出资源文件夹中。＆＃39; url（）＆＃39;声明未被修改。

我希望这些行会被＆＃34; require ...＆＃34;并且该要求将触发用于svg。

的文件加载器

以下是来自webpack.config.js的加载器：

loaders: [
{
  test: /\.ts$/,
  loaders: ['awesome-typescript-loader', 'angular2-template-loader']
},
{
  test: /\.html$/,
  loader: 'html'
},
{
  test: /\.scss$/,
  exclude: helpers.root('src', 'app'),
  loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap')
},
{
  test: /\.scss$/,
  include: helpers.root('src', 'app'),
  loaders: ['raw', 'sass?sourceMap']
},
{
  test: /\.css$/,
  include: helpers.root('src', 'app'),
  loader: 'raw'
},
{
  test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|otf)$/,
  loader: 'file-loader?name=assets/[name].[hash].[ext]'
}
]

以下是一个组件scss文件的示例：

.back-button {
  background: url(public/images/back.svg) no-repeat left;
  width: 16px;
  height: 19px;
  background-size: contain;
  margin-left: 15px;
}

如果我在主文件styles.scss中移动此.scss的内容，则图像会正确添加到assets文件夹中，并且url（）的内容会被正确替换：

.back-button {
    background: url(/assets/back.be6884cba01794a64105228e8e25ce66.svg) no-repeat 0;
    width: 16px;
    height: 19px;
    background-size: contain;
    margin-left: 15px;
}

我认为这与组件scss在样式标记中内联加载这一事实有关。

提前致谢:)

在Webpack中使用raw的scss文件中的url无法正常工作

0 个答案: