Использовать относительный путь псевдонима для импорта css в Webpack

внешний интерфейс JavaScript CSS Webpack

причина

При обработке упаковки с помощью Webpack вы можете настроить псевдоним для каталога, и код может использовать относительный путь к псевдониму для ссылки на ресурсы.

В проектах Vue мы обычно используемvue-webpackScaffolding генерирует шаблоны проектов, а затем настраивает@Поместите ресурсы и исходный код в корневой каталог проекта./srcпсевдоним каталога;

...,
resolve: {
  ...,
  alias: {
    '@': resolve('src')
  }
}

Таким образом, мы можем использовать форму в файле js, напримерimport tool from '@/utils/xxx'способ цитирования/src/utils/xxx.jsфайл, и Webpack правильно распознает и упаковывает его.

Но в файлах css нравится меньше, sass, стилус, используйте@import "@/style/theme"Синтаксис для ссылки является относительным@Каталог сообщает об ошибке «Не удается найти каталог @», что указывает на то, что веб-пакет неправильно определил относительный путь к ресурсу.

анализировать

Причина в том, что файл css будет использоватьсяcss-loaderручка, здесь css@importСледующая строка будетcss-loaderРассматривается как абсолютное разрешение пути, так как мы не добавлялиcss-loaderпсевдоним, поэтому он сообщит, что не найден@содержание.

решить

Есть два решения для использования псевдонимов относительных путей при импорте css в Webpack;

Один прямоcss-loaderДобавить кailasпуть, но вvue-webpackВ данном шаблоне громоздко и избыточно добавлять конфигурацию только для этого плагина;

Второй — добавить строку в начало пути ссылки~символы, такие как@import "~@/style/theme"; Webpack запустится с~Пути с префиксом символов разрешаются как зависимые модули, так что@Конфигурация псевдонима вступит в силу.

Суммировать

~Думайте о разрешении модуля как о чем-то, что делает веб-пакет, а не css-loader.

Все виды не-js прямых ссылок (import require) можно использовать статические ресурсы, полагаясь на проблемы с загрузкой относительного пути.~Синтаксис отлично разрешен;

Например, в css-модуле:@import "~@/style/theme"

В свойстве css:background: url("~@/assets/xxx.jpg")

В html-теге:<img src="~@/assets/xxx.jpg" alt="alias">

использованная литература

Перепечатано с:wiki Информация по этому маршруту What/wiki/%E6%8A…

Категории