Как импортировать вызможности гема compass в Webpacker?

Question

Антон Мисягин @sunnmas

Ruby

Как импортировать вызможности гема compass в Webpacker?

Первый компонент Vue, прикручиваемый к существующему рельсовому приложению. Столкнулся с множеством проблем, вот очередная из них. Необходимо написать стили компонента на языке стилей sass, используя переменные и миксины из файлов стилей, используемых в приложении, не относящихся к webpacker. И вроде бы импорт такого файла не вызывает особых проблем, кроме использования спрайтов. Я использую джем 'compass-rails', '3.1.0'. Это дает мне право писать понятный для sprockets импорт: @import 'compass/reset' и другие импорты, доступные в данном джеме. Но эту конструкцию не понимает webpacker:

Module build failed:
@import 'compass/reset'
^
File to import not found or unreadable: compass/reset

В общем, кто подключал компас во vue компонентах, прошу откликнуться и помочь

<template lang="haml">
%div
  #video-help
    %p Для добавления видео с youtube.com выполните следующие действия:
    %ul.marker-list
      %li Загрузите Ваше видео на сервис youtube.
      %li Видео должно быть публичным.
      %li Скопируйте ID видео (либо ссылку на видео).
      %li Добавьте видео к объявлению, указав ID видео (либо ссылку на видео).
  %p{'d-data': 'df'} Привет, {{title2}}
</template>


<script lang="coffee">
export default
	props: ['title2']
	data: ()->
		return data: {}
</script>


<style scoped lang="sass">
@import '../../../../assets/stylesheets/styles.sass'
#video-help
  @mixin compass-mixin
  color: blue
</style>

Через сутки после создания темы дополняю...
Нашел на данную тему вот это:
how-to-configure-webpack-to-use-compass-in-my-project
В данной теме вопрос помечен решением. И там предлагают даже два решения. Но так как я новичок в webpacker и я смутно представляю себе, что такое лоадер и с чем его едят, то у меня не получилось. Во-первых этот кусок кода:

module.exports = {
// ...
module: {
loaders: [
/* some other loaders */
{
test: /\.scss$/,
loader: 'style!css!ruby-sass?compass=1'
}
]
}
};

давал мне ошибку и поэтому я переписал это вот так:
config/webpack/loaders/compass.js

module.exports = {
    test: /\.scss$/,
    loader: 'style!css!ruby-sass?compass=1'
};

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const coffee =  require('./loaders/coffee')
const vue =  require('./loaders/vue')
const compass =  require('./loaders/compass')

environment.loaders.append('vue', vue)
environment.config.resolve.alias = { 'vue$': 'vue/dist/vue.esm.js' }
environment.loaders.append('coffee', coffee)
environment.loaders.append('compass', compass)
module.exports = environment

При этом webpack-dev-server запускается без ошибок, но компиляция по прежнему дает отсутствие файлов компаса. С решением про mixins-compass то же самое. Видимо неумело пользуюсь лоадерами.