Кто работает c  Pug, Slim, Sass никогда больше не возвратятся к "чистому" HTML,CSS коду по крайней мере по своей воле. Скорость кодирования высока, ошибок меньше.

Вариант настройки

Установим все необходимые модули

yarn add --dev pug pug-plain-loader sass-loader node-sass vue-style-loader css-loader

файлы в директории config/webpack/loaders

  • pug.js
  • sass.js

sass.js

/**
 * @see https://vue-loader.vuejs.org/ru/guide/pre-processors.html#sass
 */
module.exports = {
  test: /\.sass$/,
  use: [
    'vue-style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        indentedSyntax: true,

        /**
         * передача глобальных переменных
         *
         * sass-loader также поддерживает опцию data, которая позволяет
         * вам передавать общие переменные во все обрабатываемые файлы
         * без необходимости везде их явно импортировать
         *
         * можно указать файл, например `variables.scss`
         */
        // data: `$color: red;`
      }
    }
  ]
}

pug.js

/**
 * Вместо использования pug-loader мы должны использовать загрузчик,
 * который вернёт сырую строку HTML, например pug-plain-loader
 *
 * @see https://vue-loader.vuejs.org/ru/guide/pre-processors.html#pug
 */
module.exports = {
  test: /\.pug$/,
  loader: 'pug-plain-loader'
}

/**
 * Если вы также собираетесь импортировать файлы .pug как HTML-строки
 * в JavaScript, вам нужно добавить в цепочку raw-loader после загрузчика
 * пре-процессора. Обратите внимание, что добавление raw-loader сломает
 * использование в компонентах Vue, поэтому потребуется два правила: одно
 * для файлов Vue с использованием resourceQuery, другое (fallback) для
 * импортов из JavaScript
 */
// module.exports = {
//   test: /\.pug$/,
//   oneOf: [
//     // это применяется к `<template lang="pug">` в компонентах Vue
//     {
//       resourceQuery: /^\?vue/,
//       use: ['pug-plain-loader']
//     },
//     // это применяется к импортам pug внутри JavaScript
//     {
//       use: ['raw-loader', 'pug-plain-loader']
//     }
//   ]
// }

И добавляем  в файл конфигурации config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')

// *** 1
const pug = require('./loaders/pug')
const sass = require('./loaders/sass')
// --


environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())

// *** 2
environment.loaders.prepend('sass', sass)
environment.loaders.prepend('pug', pug)
// -


environment.loaders.prepend('vue', vue)
module.exports = environment