Cannot get CSS variables to work with npm module.

[laclance]

I followed the instructions here https://www.npmjs.com/package/@zeit/next-css. It seems like a simple setup but I cannot figure out why i get this error

./node_modules/react-phone-number-input/style.css 2:0
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /* CSS variables. */
> :root {
| 	--PhoneInput-color--focus: #03b2cb;
| 	--PhoneInputInternationalIconPhone-opacity: 0.8;

next.config.js

const withImages = require('next-images')
require('dotenv').config()
const withPlugins = require('next-compose-plugins')
const withCSS = require('@zeit/next-css')

module.exports = withPlugins([withImages, withCSS], {
  env: {
    SENDGRID_API_KEY: process.env.SENDGRID_API_KEY,
  },
})

postcss.config.js

module.exports = {
  plugins: {
    // Illustrational
    'postcss-css-variables': {}
  }
}

[zeckdude]

Yup, I'm experiencing the same issue :(

[timneutkens]

Hi, thanks for creating an issue. We currently recommend using https://nextjs.org/docs/basic-features/built-in-css-support as zeit/next-css and zeit/next-sass have been deprecated in favor of the built-in support.