Как добавить autoprefixer для LESS внутри .vue файлов в webpack.config?

Question

[discoder]

Добрый день коллеги.

У меня есть несколько vue-компонентов, внутри которых я использую LESS для задания правил для стилей. У меня есть webpack.config для билда проекта.
Во время отработки vue-loader - я пропускаю нашедшийся внутри файла LESS код через ещё три лоадера: vue-style-loader!css-loader!less-loader.

Код

{
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {
                    'less': 'vue-style-loader!css-loader!less-loader'
                }
            }
        }

ВОПРОС: Как на этапе разрешения .vue компонентов - добавить Автопрефиксер для LESS?

Answer 1

[discoder]

Вот так

1. npm i --save-dev postcss-loader

2. Создаем конфигурационный файл - postcss.config.js

module.exports = {
  parser: 'sugarss',
  plugins: {
    'postcss-import': {},
    'postcss-cssnext': {},
    'cssnano': {}
  }
}

3. Дополняем строчку из webpack.cinfig.js

'less': 'vue-style-loader!css-loader!postcss-loader!less-loader'

Answer 2

[Александр Таратин]

Сейчас меня закидают ссаными тряпками, но:
Если не используете scoped стили (а причин их использовать не будет, если добавлять короткие (1-3 буквы) префиксы "пакетов" к названиям компонентов и соблюдать бэм), то рекомендую отказаться от размещения стилей через style тег внутри компонента, а подтягивать стили через require или import в начале script тега.
Основная причина - странный порядок подключения. Особенно доставляет геморроя, когда часть стилей уже подключается через require или import.
Да и настраивать лоадеры для sass/less так проще.

Answer 3

[Alexander Pushkarev]

Используйте laravel mix. Там удобное API.

Comments

[triggerfinger]

Где хоть слово было упоминания что Ларавел вообще используется? Что за манера давать бредовые советы исходя из своей вкусовщины?

[triggerfinger]

Человек спрашивает про Less - ему советуют Ларавел. Безумие какое-то...

[Alexander Pushkarev]

triggerfinger, laravel mix к laravel framework вообще отношения не имеет (просто это от тех же ребят). laravel mix это обёртка над webpack. Префиксы во vue файлах делает автоматически.

[triggerfinger]

Alexander Pushkarev, тогда логиченее использовать официальные бойлерплейты

[Alexander Pushkarev]

triggerfinger, вот мой конгфиг для 2 SPA и 1 библиотеки. Всё это на Vue. Разве это не удобнее громоздких конфигов? Для less писать также как и для sass

[triggerfinger]

Alexander Pushkarev, мне личнл редко надо сильно менять стандартный конфиг из бойлерплейта, разве что расширить плагинами. Это не так сложно.