Webpack, генерирующий URL другого файла для CSS url ()

Question

Я использую веб-пакет для компиляции и разработки моей темы Drupal с использованием Bootstrap 4. Я использую ее для объединения различных библиотек JS и для сборки sass в CSS, чтобы я мог использовать только те элементы Bootstrap, которые мне нужны, вместо всего shebang.

У меня есть исходная папка с папкой "js" и папкой "sass".

Мой webpack.config.json выглядит так:

const path = require('path');

module.exports = {
  mode: 'development',
  entry: [ './src/js/bootstrap.js', './src/sass/style.scss'],
  output: {
    filename: 'js/mytheme-libraries.js',
    path: path.resolve(__dirname, '.')
  },
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [{
          loader: 'file-loader', // load files
          options: {
            name: 'style.css',
            outputPath: './css',
          },
        },
        {loader: 'extract-loader'},
        {
          loader: 'css-loader',
          options: {
            sourceMap: true
          }
        }, {
          loader: 'postcss-loader',
          options: {
            plugins: function () {
              return [
                require('autoprefixer')
              ];
            },
            sourceMap: true,
            sourceMapEmbed: false
          }
        }, {
          loader: 'sass-loader',
          options: {
            sourceMap: true,
            sourceMapEmbed: false,
            outFile: './css/style.map.css'
          }
        }]
      },
      {
        test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        include: [
          path.resolve(__dirname, "./src/fonts")
        ],
        use: [{
          loader: 'file-loader',
          options: {
            name: '/sites/all/themes/mytheme/fonts/[name].[ext]',
            emitFile: false
          }
        }]
      },
      {
        test: /\.(png|jpg|gif|svg?)(\?[a-z0-9]+)?$/,
        exclude: [
          path.resolve(__dirname, "./src/fonts")
        ],
        use: [{
          loader: 'file-loader',
          options: {
            name: '/sites/all/themes/mytheme/img/[name].[ext]',
            emitFile: false
          }
        }]
      }
    ]
  }
};

и мой package.json

{
    "name": "mytheme",
    "version": "1.0.0",
    "description": "Tools for building Bootstrap for the Mytheme Theme.",
    "private": true,
    "scripts": {
        "build-dev": "webpack --config webpack.config.js",
        "cache-clear": "drush @dev cc all"
    },
    "author": "Pryrios",
    "license": "MIT",
    "dependencies": {
        "animated-scroll-to": "^1.3.1"
    },
    "devDependencies": {
        "autoprefixer": "^9.6.1",
        "bootstrap": "^4.3.1",
        "css-loader": "^3.2.0",
        "extract-loader": "^3.1.0",
        "file-loader": "^4.2.0",
        "jquery": "^3.4.1",
        "node-sass": "^4.12.0",
        "popper.js": "^1.15.0",
        "postcss-loader": "^3.0.0",
        "sass-loader": "^7.3.1",
        "webpack": "^4.41.0",
        "webpack-cli": "^3.3.9"
    }
}

, и я создаю свои активы, запустив "npm run build-dev", который вызывает "webpack --config webpack.config.js" и создает мой style.css и мой jsфайл.(Примечание: я не создаю файлы изображений / шрифтов, так как они уже находятся в папке внутри создаваемой темы, и на них ссылаются из папки src / sass "../..").

Теперь в одном из моих CSS-файлов я использую одно и то же фоновое изображение дважды:

.myfirst-div {
  background: url('../../img/point-bg.png') center 5px/2px 10px repeat-y;
}

.mysecond-div {
  background: url("../../img/point-bg.png") center 5px/2px 10px repeat-y;
}

Ожидаемый результат заключается в том, что оба CSS-объявления будут иметь вид:

.myfirst-div {
  background: url('/sites/all/themes/mytheme/img/point-bg.png') center 5px/2px 10px repeat-y;
}

.mysecond-div {
  background: url("/sites/all/themes/mytheme/img/point-bg.png") center 5px/2px 10px repeat-y;
}

Проблема:

Но я обнаружил, что у второго div есть другое изображение.Путь правильный, и изображение существует, но оно не объявлено в sass.Я исследовал, и изображение, которое возвращается, является следующим, объявленным в "url ()" в sass.

Я не понимаю, почему это происходит.Я совершенно новичок во всей этой среде webpack / nodejs, поэтому могу ошибаться во многих вещах.Я пытался использовать --profile при вызове веб-пакета, чтобы попытаться проверить что-то не так, но безрезультатно.

anyone Может кто-нибудь указать мне, куда я вверты? ¿Или, по крайней мере, предложить, как я могу отладить дальше этот