Задать вопрос
@discoder
Web Developer
javascript

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

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

У меня есть несколько 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?
  • Вопрос задан
  • 1012 просмотров
Комментировать
Подписаться 1 Средний Комментировать
Решения вопроса 1
@discoder Автор вопроса
Web Developer
Вот так

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'
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
Сейчас меня закидают ссаными тряпками, но:
Если не используете scoped стили (а причин их использовать не будет, если добавлять короткие (1-3 буквы) префиксы "пакетов" к названиям компонентов и соблюдать бэм), то рекомендую отказаться от размещения стилей через style тег внутри компонента, а подтягивать стили через require или import в начале script тега.
Основная причина - странный порядок подключения. Особенно доставляет геморроя, когда часть стилей уже подключается через require или import.
Да и настраивать лоадеры для sass/less так проще.
Ответ написан
Комментировать
Комментировать
AXP-dev
@AXP-dev
Используйте laravel mix. Там удобное API.
Ответ написан
6 комментариев
6 комментариев
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Спарсить ссылки на все товары конкретного продавца в озон
18 апр. 2024, в 20:13
2000 руб./за проект
Устранить проблемы с парсерами и отображением новостей
18 апр. 2024, в 20:08
7000 руб./за проект
Установить Windows и терминалы RDP на Dedicated Server (без лицензии)
18 апр. 2024, в 20:07
2000 руб./за проект
Ещё заказы