Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

256
Vistas
Webpack stopped to load CSS variables with postcss-variables-loader

I am migrating a webpack application based on old versions to some new ones and I am getting troubles with the load of variable.css which now seems not recognized anymore

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
> :root {
|   --monospace-font-family: 'Consolas', 'Inconsolata', 'Droid Sans Mono',
|     monospace;
    "css-loader": "2.1.1",
    "postcss-loader": "3.0.0",
    "typescript": "4.0.3",
    "webpack": "4.30.0",
    "webpack-dev-server": "3.11.0",

Old webpack.config.js used to be:

      test: /\.css$/,
          exclude: /variables\.css$/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [{
                loader: 'css-loader', options: { sourceMap: true, },
              },
              'postcss-loader',
            ],}),
        },
        {
          test: /variables\.css$/,
          loader: 'postcss-variables-loader?es5=1',
        }

Now, I am with new versions

    "postcss": "^8.4.8",
    "postcss-loader": "^6.2.1",
    "mini-css-extract-plugin": "^2.6.0",
    "typescript": "^4.6.2",
    "webpack": "^5.70.0",
    "webpack-dev-server": "^4.7.0",

and I had to change che webpack.config.js to include the new mini-css-extract-plugin

        {
          test: /\.css$/i,
          exclude: /variables\.css$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader','postcss-loader',],
        },
        {
          test: /\.variables.css$/,
          use: [ {loader: 'postcss-variables-loader?es5=1',},],
        },

The file variable.css includes some css basic var like

:root {
  --monospace-font-family: 'Consolas', 'Inconsolata', 'Droid Sans Mono',
    'Monaco', monospace;
}

@custom-media --small-viewport (max-width: 780px);

and it is imported into various .tsx files using just

import variables from './variables.css';

I cannot understand if the entire structure of css and the way they are loaded must change or there's one more fix I might need.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

The trouble is not the loader, but the test. A backslash was missing.

It should be:

test: /\.variables\.css$/
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda