How to import compass gem features into Webpacker?

Question

Sass

The first Vue component to be screwed into an existing rail app. I've run into a lot of problems, here's one of them. You need to style the component in the sass style language using variables and mixins from the non-webpacker stylesheets used in the application. And it seems that importing such a file does not cause any special problems, except for the use of sprites. I am using jam 'compass-rails', '3.1.0'. This gives me the right to write sprockets-friendly imports: @import 'compass/reset'and other imports available in this jam. But webpacker does not understand this construction:

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

In general, who connected the compass in vue components, please respond and help

<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>

A day after the creation of the topic, I supplement ...
I found this on this topic:
how-to-configure-webpack-to-use-compass-in-my-project
In this topic, the question is marked as a solution. And they even offer two solutions. But since I am new to webpacker and I have a vague idea of ​​what a loader is and what it is eaten with, I did not succeed. First, this piece of code:

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

was giving me an error and so I rewrote it like this:
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

In this case, webpack-dev-server starts without errors, but compilation still gives no compass files. The same goes for the mixins-compass solution. Apparently I use loaders ineptly.

Answer 1

abandoned the compass in favor of svg sprites