PostCSS-cssnext не компилирует CSS-ввод

Question

У меня проблема с postcss-cssnext: он не компилирует мой CSS так, как я ожидаю.

Это мой CSS-ввод:

:root {
  --bgcolor: #fbc547;
}

body {
  background-color: var(--bgcolor);
}

К сожалению, результат выглядит точно так же - однако я ожидаю что-то вроде этого:

body {
  background-color: #fbc547;
}

Для лучшего понимания вот как выглядит мой webpack.config.js:

module: {
  rules: [
    {
      test: /\.css$/,
      exclude: /node_modules/,
      use: [
        'style-loader',
        { loader: 'css-loader', options: { importLoaders: 1 } },
        'postcss-loader'
      ]
    }
  ]
}

И вот мой postcss.config.js:

module.exports = {
  plugins: [
    require('postcss-smart-import'),
    require('postcss-cssnext')
  ]
}

Postcss-cssnext версия 2.11.0. Я предполагаю, что общая настройка работает, так как префиксы вендоров правильно применяются в CSS-выходе.

Я относительно новичок в Webpack и Postcss. На самом деле это моя первая настоящая попытка его использования. Надеюсь, вы, ребята, сможете мне помочь:)

Answer 1

Когда используешь requireВы должны вызвать функцию. Таким образом, ваш конфиг должен выглядеть так:

module.exports = {
  plugins: [
    require('postcss-smart-import')(),
    require('postcss-cssnext')()
  ]
}