如何使用 webpack 和 file-loader 在兩個捆綁 (scss) 文件中使用一個圖像？ 最后一個返回 undefined

Question

我有 webpack 問題（與 sass-loader 和 file-loader 結合使用）。 我在兩個不同的包 (scss) 文件中引用了一個圖像，我將背景圖像 url 指向完全相同的路徑。

我首先導入的包文件顯示正確，但第二個文件為背景屬性返回一個“未定義”的 url。

有沒有人遇到過這個問題？

我已經嘗試了文件加載器的各種選項，但到目前為止都沒有奏效。

唯一對我有用的選項是復制圖像並引用副本（例如引用兩個不同的文件）。

這遠非最佳實踐，因為我現在加載兩個完全相同的圖像。

我的 webpack.config.js 看起來像這樣：

const autoprefixer = require('autoprefixer');
var path = require('path');

module.exports = {
  entry: ['./src/app.scss', './src/app.js'],
  output: {
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'bundle.css'
            },
          },
          {loader: 'extract-loader'},
          {loader: 'css-loader'},
          {loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer()],
            },
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: ['./node_modules'],
            },
          }
        ],
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015'],
          plugins: ['transform-object-assign']
        },
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'Images'},
          }]
      }
    ],
  },
};

兩個 scss 片段（使用相同的 url）如下所示：

body.withLogo::after{
    content: '';
    display: block;
    position: fixed;
    z-index: -3;
    height: 100vh;
    width: 100%;
    background: url('../Images/logo-overlay.png');
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.3;
    top: 0;
    right: -30%;
}

和

#logo-overlay{
    z-index: 10;
    position: absolute;
    top: 0;
    min-height: 100%;
    width: 100%;
    background: url('../Images/logo-overlay.png');
    opacity: 0.3;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

Answer 1

我也有這個問題。
問題來自您也在使用的提取加載器（與 css-loader 結合使用）。

您可以返回 v2 之前的版本。
例如：“css-loader”：“^1.0.0”

請比較：
https://github.com/webpack-contrib/css-loader/issues/864