Автоматический импорт SASS / SCSS в каждый компонент Vue.js

Если вы работали с Vue.js и SASS (или с SCSS здесь), возможно, вы столкнулись с этой очень распространенной проблемой. У вас есть переменные SCSS в одном файле, которые вы хотите сделать доступными для ваших компонентов Vue.

Хорошая новость заключается в том, что Vue CLI невероятно упрощает поддержку написания SCSS, а с однофайловыми компонентами Vue вы можете просто добавить lang="scss" в блок <style> (документы).

Плохая новость в том, что для того, чтобы использовать ваши сладкие переменные Sassy (или миксины и функции), вы должны вручную @import их в блоке стиля каждого компонента. По мере роста вашего приложения вы скоро поймете, насколько болезнен этот процесс.

<style lang="scss">
@import '@/path/to/variables.scss'

/** ... */
</style>

Разве не было бы неплохо, если бы вы могли просто предоставить эти функциональные файлы SCSS глобально, не импортируя их вручную? Хорошие новости, можно!

Vue CLI 4:

Создайте файл с именем vue.config.js (если у вас его еще нет)
Добавьте следующие строки:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/_shared.scss";`,
      },
    },
  },
};

Обратите внимание, что если вы обновляете проект с Vue CLI 3, вы можете столкнуться с проблемой:

Sass Loader has been initialised using an options object that does not match the API schema.

В этом случае у вас может быть устаревший файл конфигурации. См. Следующий раздел для Vue CLI 3 относительно версий sass-loader.

Vue CLI 3:

Создайте файл с именем vue.config.js (если у вас его еще нет)
Добавьте следующие строки:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/assets/_shared.scss";`,
      },
    },
  },
};

ОБНОВЛЕНИЕ: если вы обновили sass-loader, вы можете столкнуться с проблемой:

Sass Loader has been initialised using an options object that does not match the API schema.

Решение состоит в том, чтобы заменить data в приведенных выше параметрах на prependData для версии 8 и на additionalData для версии 9.

Vue CLI 2:

Откройте файл /build/utils.js
Найдите строку, содержащую scss: generateLoaders('sass')
Замените его следующим:

scss: generateLoaders("sass").concat({
  loader: "sass-resources-loader",
  options: {
    resources: path.resolve(__dirname, "./src/_shared.scss")
  }
})

Что нужно иметь в виду:

Оба описанных выше метода предполагают, что вы храните общий Sass в файле по адресу /src/_shared.scss. Если в вашем проекте используется другое имя файла или другая папка, внесите соответствующие изменения.

Эти файлы будут импортированы и доступны каждому компоненту, который вы пишете, что отлично подходит для таких вещей, как переменные, функции или миксины, но вам следует избегать любых реальных правил CSS. Добавление правил CSS в ваши общие файлы Sass импортирует эти правила в каждый компонент и раздувает ваш проект. Для глобальных правил CSS создайте отдельный файл и вместо этого импортируйте его в основной файл App.vue.

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

Первоначально опубликовано на https://austingil.com 16 ноября 2020 г.

Автоматический импорт SASS / SCSS в каждый компонент Vue.js