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

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

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

Похожие вопросы