Правильный способ добавить поддержку PostCSS в Vue cli 3

Question

Как добавить поддержку PostCSS в Vue cli 3 (я использую бета 7)? Есть ли плагин для этого? Не поддерживается из коробки.

Когда я пытался импортировать, как это

import './index.pcss'

используя сгенерированный по умолчанию проект

./src/index.pcss
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .sofa {
|   font-family: "sofachrome", serif;
| }
 @ ./src/main.js 5:0-22

my postcssrc.js:

module.exports =
  {
    'plugins': {
      'autoprefixer': {},
      'postcss-smart-import': {},
      'postcss-custom-properties': {},
      'postcss-nested': {}
    }
  }

Answer 1

PostCSS (как указано Биллом и Юрием) работает по умолчанию , но загрузчик Webpack настроен только для .css расширений. Чтобы изменить его, обновите vue.config.js:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('pcss')
      .use('postcss-loader')
      .tap(options =>
        merge(options, {
          sourceMap: false,
        })
      )
  }
}

Измените пример в соответствии с вашими потребностями. Подробнее в документах Vue-Cli

Answer 2

Просто используйте расширение .css, а не .pcss. Если вы должны использовать .pcss, вам нужно настроить это в веб-пакете. Что касается того, как правильно использовать это правило, для этого мне нужно немного изучить. Хотя я думаю, что использование .css - это явный выигрыш.