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

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

# Sass

Например, для компиляции нашего тега <style> с помощью Sass/SCSS:

npm install -D sass-loader node-sass

В вашей конфигурации webpack:

module.exports = {
  module: {
    rules: [
      // ... другие правила опущены

      // это правило будет применяться к обычным файлам `.scss`
      // А ТАКЖЕ к секциям `<style lang="scss">` в файлах `.vue`
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  // плагин опущен
}

Теперь, в дополнение к возможности писать import 'style.scss', мы можем использовать SCSS также и в компонентах Vue:

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

Любое содержимое внутри блока будет обработано webpack, как если бы оно находилось внутри файла *.scss.

# Sass vs SCSS

Обратите внимание, что sass-loader обрабатывает синтаксис scss по умолчанию. Если вам требуется синтаксис sass с отступами, то необходимо передать опцию в загрузчик:

// webpack.config.js -> module.rules
{
  test: /\.sass$/,
  use: [
    'vue-style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        indentedSyntax: true,
        // sass-loader >= 8
        sassOptions: {
          indentedSyntax: true
        }
      }
    }
  ]
}

# Передача глобальных переменных

sass-loader также поддерживает опцию additionalData, которая позволяет вам передавать общие переменные во все обрабатываемые файлы без необходимости везде их явно импортировать:

// webpack.config.js -> module.rules
{
  test: /\.scss$/,
  use: [
    'vue-style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        // вы можете также указать файл, например `variables.scss`
        // используйте свойство `prependData` здесь, если версия sass-loader = 8
        // используйте свойство `data` здесь, если версия sass-loader < 8
        additionalData: `$color: red;`
      }
    }
  ]
}

# LESS

npm install -D less less-loader

// webpack.config.js -> module.rules
{
  test: /\.less$/,
  use: [
    'vue-style-loader',
    'css-loader',
    'less-loader'
  ]
}

# Stylus

npm install -D stylus stylus-loader

// webpack.config.js -> module.rules
{
  test: /\.styl(us)?$/,
  use: [
    'vue-style-loader',
    'css-loader',
    'stylus-loader'
  ]
}

# PostCSS

npm install -D postcss-loader

// webpack.config.js -> module.rules
{
  test: /\.css$/,
  use: [
    'vue-style-loader',
    {
      loader: 'css-loader',
      options: { importLoaders: 1 }
    },
    'postcss-loader'
  ]
}

Конфигурация PostCSS может быть выполнена через postcss.config.js или опции postcss-loader. Подробнее можно прочитать в документации postcss-loader.

postcss-loader может также применяться в комбинации с другими пре-процессорами, указанными выше.

# Babel

npm install -D babel-core babel-loader

// webpack.config.js -> module.rules
{
  test: /\.js?$/,
  loader: 'babel-loader'
}

Конфигурация Babel может быть выполнена через .babelrc или опции babel-loader.

# Исключение node_modules

Обычная практика, указывать exclude: /node_modules/ для правил транспиляции JS (например, babel-loader) которые применяются к файлам .js. Из-за изменений версии v15, если вы импортируете однофайловые компоненты SFC внутри node_modules, его секция <script> также будет исключена из транспиляции.

Чтобы обеспечить транспиляцию JS для однофайловых компонентов Vue в node_modules, вам необходимо добавить для них исключение с помощью функции в опции exclude:

{
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: file => (
    /node_modules/.test(file) &&
    !/\.vue\.js/.test(file)
  )
}

# TypeScript

npm install -D typescript ts-loader

// webpack.config.js
module.exports = {
  resolve: {
    // Добавляем `.ts` как обрабатываемое расширение.
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      // ... другие правила опущены
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: { appendTsSuffixTo: [/\.vue$/] }
      }
    ]
  },
  // ... плагин опущен
}

Конфигурация TypeScript может быть выполнена через tsconfig.json. Также смотрите документацию для ts-loader.

# Pug

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

npm install -D pug pug-plain-loader

// webpack.config.js -> module.rules
{
  test: /\.pug$/,
  loader: 'pug-plain-loader'
}

Теперь вы можете писать:

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

Если вы также собираетесь импортировать файлы .pug как HTML-строки в JavaScript, вам нужно добавить в цепочку raw-loader после загрузчика пре-процессора. Обратите внимание, что добавление raw-loader сломает использование в компонентах Vue, поэтому потребуется два правила: одно для файлов Vue с использованием resourceQuery, другое (fallback) для импортов из JavaScript:

// webpack.config.js -> module.rules
{
  test: /\.pug$/,
  oneOf: [
    // это применяется к `<template lang="pug">` в компонентах Vue
    {
      resourceQuery: /^\?vue/,
      use: ['pug-plain-loader']
    },
    // это применяется к импортам pug внутри JavaScript
    {
      use: ['raw-loader', 'pug-plain-loader']
    }
  ]
}