WebHive

Как известно vue.js компоненты могут содержать в одном файле как код компонента, так и стили и шаблоны. Кому как, но мне такой подход вполне по душе. Но есть нюансы — импортируя внешний scss файл в стиль компонента нужно всегда указывать полный путь относительно текущего файла компонента. В итоге получаются довольно длинные и неприятные бояны типа @import '../../../../../stylesheets/shared/screens.scss';. Как же это побороть?

Так как сборкой статики у нас занимается webpacker, то вполне логично копать там. Но в стандартном рельсовом конфиге webpacker-а нет никаких опций на этот счёт, поэтому полез в config/webpacker/environment.js

Собственно понятно было, что нужно было добавить в sass-loader параметр includePaths. Но куда я его не пихал — никак. Оказалось, что у vue-loader-а свой набор загрузчиков, и этот параметр нужно как-то пропихнуть именно туда.

В общем в итоге нужно добавить в config/webpack/environment.js следующий кусок кода:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const { environment } = require('@rails/webpacker');
const path = require('path');

const sassConfig = {
  includePaths: [
    path.resolve(__dirname, '../../app/javascript/src/stylesheets/')
  ]
};
const vueLoader = environment.loaders.get('vue');
vueLoader.options = {
  extractCSS: true,
  loaders: {
    sass: 'vue-style-loader!css-loader!sass-loader?' + JSON.stringify(sassConfig)
  }
}

После этого я могу импортировать файлы указав путь относительно того, что был указан в этой конфигурации. В моём случае импорт превратился в:

1

@import 'shared/screens.scss';

И это прекрасно! Надеюсь этот способ будет полезен кому-то ещё.