Использование пре-процессоров

В webpack все пре-процессоры должны быть применены с соответствующим загрузчиком. vue-loader позволяет вам использовать другие загрузчики webpack для обработки секций компонентов Vue. Они будут автоматически вызваны для обработки секций на основе указанного атрибута lang у секции файла.

CSS

Например, пусть в теге <style> будет использоваться Sass:

npm install sass-loader node-sass --save-dev

<style lang="sass">
  /* используем Sass здесь */
</style>

В недрах, текстовое содержимое тега <style> будет сперва скомпилировано с помощью sass-loader перед передачей для дальнейшей обработки.

Особенность sass-loader

Вопреки тому, что он называется sass-loader, по умолчанию парсится синтаксис SCSS. Если вы на самом деле хотите использовать синтаксис Sass с отступами, вам требуется настроить vue-loader для sass-loader соответственно.

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
      sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
    }
  }
}

Обратитесь к разделу продвинутой конфигурации загрузчиков для получения дополнительной информации о том, как настраивать vue-loader.

Загрузка глобального файла настроек

Часто встречаются просьбы добавить возможность загружать файл настроек в каждом компоненте без необходимости явно импортировать его каждый раз, например для использования SCSS-переменных глобально во всех компонентах. Для этого нужно:

npm install sass-resources-loader --save-dev

Затем добавить новое правило в webpack:

{
  loader: 'sass-resources-loader',
  options: {
    resources: path.resolve(__dirname, '../src/style/_variables.scss')
  }
}

Например, если вы используете vuejs-templates/webpack, измените файл build/utils.js таким образом:

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

В этот файл рекомендуется включать только переменные, примеси и т.п., чтобы предотвратить дублирование CSS в финальных скомпилированных файлах.

JavaScript

Весь JavaScript внутри Vue компонентов обрабатывается babel-loader по умолчанию. При необходимости это можно изменить:

npm install coffee-loader --save-dev

<script lang="coffee">
  # Пишем на coffeescript!
</script>

Шаблоны

Обработка шаблонов выполняется несколько иначе, потому что большинство loader'ов шаблонов webpack, например pug-loader, возвращают функцию шаблона вместо скомпилированного в строку HTML. Поэтому вместо использования pug-loader, можно просто установить оригинальный pug:

npm install pug --save-dev

<template lang="pug">
div
  h1 Hello world!
</template>

Внимание: При использовании vue-loader@<8.2.0, вам также необходимо установить template-html-loader.

Непосредственное указание loader'ов

Вы можете указывать опции для loader'ов webpack в атрибуте lang:

<style lang="sass?outputStyle=expanded">
  /* используем Sass с расширенным выводом */
</style>

Обратите внимание, это сделает ваш компонент Vue зависимым от webpack и несовместимым с Browserify и vueify. Если вы планируете распространять ваш компонент Vue, избегайте использования этого синтаксиса.

Пре-процессоры