© 2018 WebHive

Нетривиальная настройка webpacker-а для импорта стилей Vue.js

Как известно 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';

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

Комментарии