Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

255
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!