Есть проект на vue. Используется компонентный подход и стили каждого компонента хранятся в самом компоненте (нет разделения на отдельные файлы для верстки, скриптов и стилей, все в .vue файле) При сборке webpack'ом стили из компонентов собираются в отдельный css файл, при этом стили изначально написаны на less. Сама сборка стилей компонентов происходит на этапе работы vue-loader внутри лоадера для less, где через ExtractTextWebpackPlugin происходит стили выносятся в отдельный файл. На этом же этапе происходит добавление файла с переменными стилями через style-resources-loader
module.exports = {
...
module: {
rules: [
...
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
options: {
preserveWhitespace: false,
loaders: {
less: ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
'less-loader',
{
loader: 'style-resources-loader',
options: {
patterns: [
path.resolve(__dirname, 'path/to/less/variables.less'),
],
},
},
],
}),
},
},
},
],
},
],
},
...
plugins: [
...
new ExtractTextWebpackPlugin({
filename: 'styles/style.css',
}),
],
};
Появилась необходимость генерации не одного стилевого файла, а двух для двух разных подставляемых файлов с переменными less стилей. Т.е. есть два файла с переменными стилей (одни и те же переменные но с разными значениями) и нужно сгенерировать два отдельных css файла на основе каждого набора переменных.
Как это сделать я не знаю. Разбирался долго, но так и не смог найти решения. На сколько я понял обработка и вынос стилей vue-компонентов происходит на этапе vue-loader внутри лоайдера для less и вынести оттуда это не получится. Так же не получается там использовать два раза ExtractTextWebpackPlugin, чтобы в каждом экстрактить стили в отдельные файлы.
Так же была идея продублировать ту часть сборки где обрабатываются стили компонентов, но для этого нужно полностью продублировать vue-loader и все с ним связанное, а это практически 80-90% сборки, соответственно время сборки увеличится, а этого в моей ситуации делать нельзя.
Больше идей у меня нет, может кто-то сталкивался с подобной задачей и подскажет решение.