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

У меня проблема с 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-Output.

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


webpack postcss cssnext
person Patrick    schedule 02.06.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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