Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

259
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda