Webpack 4 импортирует scss через псевдоним

Question

Итак, у меня есть скрипт узла, выполняющий веб-упаковку множества папок для различных установок на нашем сервере,

            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                minimize: true,
                alias: {
                  './assets/images': imagesPath,
                  './bootstrap/config': resolve(`/External_Assets/LocalFiles/${item.id}/_config.scss`)
                }
              }
            },

item.id - это просто путь к папке, содержащей файл конфигурации для переменных scss. Когда мы строили проект локально, у нас был только один конфигурационный файл, на который ссылаются как

@import './bootstrap/config';

Что похоже на путь, указанный в псевдониме, почему это не работает? Он все еще идет и берет переменные из старой папки. Я не нашел никаких других ссылок на этот файл.

Answer 1

Редактировать 1

Сделал гист в качестве рабочего примера.

Основные моменты:

• Переместите псевдоним для разрешения. Поскольку вы используете файл _config.scss, я предполагаю, что sass-loader работает до css-loader, и он не будет работать, поскольку в этот момент псевдонимы отсутствуют.
• Я не могу заставить псевдоним работать для определенного файла .scss, хотя вместо этого вы можете просто указать на папку - bootstrap': resolve(`/External_Assets/LocalFiles/${item.id}`)
• .scss файлы имеют специальный синтаксис для загрузки не относительных путей (должен начинаться с ~). То есть вместо @import 'bootstrap/config'; должно быть @import '~bootstrap/config

Конфиг:

module.exports = {
  // ...
  resolve: {
    alias: {
      'assets/images': imagesPath, 
      'bootstrap': resolve(`/External_Assets/LocalFiles/${item.id}`)
    }
  },
  module: {
    rules: [
      // ...  
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              minimize: true,
            }
          },
          "sass-loader",
        ]
      }
    ]
  }
}

Ссылка в .scss файле:

@import "~bootstrap/config";

Старый ответ

Псевдоним

css-loader работает так же, как опция resol.alias веб-пакета. Согласно документам псевдонимы работают только для путей модулей . В вашем случае указаны относительные пути.

Чтобы это работало, вы можете использовать следующие параметры в конфигурации загрузчика:

alias: {
    'assets/images': imagesPath,
    'bootstrap/config': resolve(`/External_Assets/LocalFiles/${item.id}/_config.scss`)
    }

А затем измените импорт на @import 'bootstrap/config';