BelkinVadim
@BelkinVadim
Frontend разработчик

Как собрать less стили из vue-компонентов дважды под разные наборы less переменных?

Есть проект на 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% сборки, соответственно время сборки увеличится, а этого в моей ситуации делать нельзя.

Больше идей у меня нет, может кто-то сталкивался с подобной задачей и подскажет решение.
  • Вопрос задан
  • 142 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Averia Electronics Волгоград
от 50 000 до 100 000 руб.
FUTUROOM Самара
от 80 000 до 150 000 руб.
от 40 000 до 80 000 руб.
20 авг. 2018, в 19:05
3000 руб./за проект
20 авг. 2018, в 18:36
500 руб./в час
20 авг. 2018, в 18:25
10000 руб./за проект