Как я могу использовать одно изображение в двух пакетных (scss) файлах с webpack и file-loader? Последний из них возвращает неопределенное - PullRequest
Новая
       17

Как я могу использовать одно изображение в двух пакетных (scss) файлах с webpack и file-loader? Последний из них возвращает неопределенное

0 голосов
/ 17 июня 2019

У меня проблема с веб-пакетом (в сочетании с sass-loader и file-loader).Я ссылаюсь на изображение в двух разных пакетных (scss) файлах, где указываю URL-адрес фонового изображения точно по одному и тому же пути.

Файл пакета, который я импортирую первым, отображается правильно, но вторые файлы возвращают «неопределенный» URL-адрес для свойства background.

Кто-нибудь сталкивался с этой проблемой раньше?

Я пробовал разные варианты для загрузчика файлов, но пока ни один из них не работал.

Единственный вариант, который мне подходит, - это дублирование изображения и ссылка на дубликат (например, ссылка на два разных файла).

Это далеко не лучшая практика, потому что сейчас я загружаю два изображения, которые абсолютно одинаковы.

Мой 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;
}
...