Нужен ли postcss-загрузчик для переноса sass в css через веб-пакет?

Question

В настоящее время я изучаю sass / scss и пытаюсь настроить конфигурацию веб-пакета для тренировочного проекта. Поэтому я искал инструменты и технологии, которые мне понадобились, некоторые ресурсы предлагали использовать «node sass, sass-loader и css-loader» (документация веб-пакета), в то время как другой предложил пост-CSS вместо css-loader. Я хотел бы знать разницу.

Answer 1

TL; DR

Нет, вам не нужно postcss-loader в веб-пакете для использования SASS. sass-loader в одиночку сделает всю работу. Хотя для установки требуется node-sass.

---

Что такое PostCSS?

PostCSS - это инструмент для преобразования CSS с помощью плагинов JS. Эти плагины могут поддерживать переменные и миксины, переносить будущий синтаксис CSS, встроенные изображения и т. Д.

Ссылка: https://webdesign.tutsplus.com/tutorials/postcss-deep-dive-what-you-need-to-know--cms-24535

Autoprefixer - один из настоятельно рекомендуемых плагинов дляuse.

Что такое SASS?

SASS - это препроцессор CSS. Узнайте больше здесь https://sass -lang.com / guide . sass-loader - это загрузчик веб-пакетов, который делает то же самое для вас с инструментами веб-пакетов.

Что делает node-sass?

Node-sassбиблиотека, которая обеспечивает привязку Node.js к LibSass, версии C популярного препроцессора таблиц стилей Sass.

Это не альтернатива sass-loader. node-sass находится в peerDependencies из sass-loader, поэтому вам понадобится использовать sass-loader.

Ref: https://github.com/sass/node-sass

Можете ли вы использовать оба sass-загрузчик и postcss-загрузчик?

Да! И я бы порекомендовал вам использовать его вместе. Фактически, если вы извлекаете проект Create React App, в конфигурации веб-пакета вы можете найти как sass-loader, так и postcss-loader.

Answer 2

Это не обязательно, но я настоятельно рекомендую плагин autoprefixer. Загрузчики позволяют импортировать файлы указанных типов.

  {
    loader: 'postcss-loader',
    options: {
      plugins: () => [require('autoprefixer')]
    }
  }