Postcss and variables

[LunaticMuch]

I am feeling a bit stuck with postcss and variables. I used to sue postcss-variable-loader but I understand that with current postcss and webpack I could avoid it.

My code, which uses a MUI theme, has this piece:

import variables from './variables.css';

export const theme = createTheme({
  components: {
    MuiCheckbox: {
      styleOverrides: {
        root: {
          width: variables.iconsSize,
          height: '15px',
          padding: 0,
        },
      },
    },

The variable is loaded by the file.
In webpack, I have

test: /\.css$/,
use: [
  MiniCssExtractPlugin.loader,
  {
    loader: 'css-loader',
    options: { sourceMap: true },
  },
  { loader: 'postcss-loader', options: { sourceMap: true } },
],

The compilation is actually fine, but when I load the page, webpack overlays some warnings:

WARNING in ./src/components/MUITheme.tsx 25:27-46
export 'default' (imported as 'variables') was not found in './variables.css' (module has no exports)

So clearly not parsing the import variable. In my plugins in postcss.config.js, I just import

    require('postcss-import'),
    require('postcss-preset-env')()

Now, it's not clear....this configuration should, but it fails with an unclear reason regarding a reexport which makes no sense to me. EIther it can't process by default variables, or I am failing something.

[ai]

How do you configure postcss-variable-loader in webpack to be able to import CSS in JS?

[LunaticMuch]

How do you configure postcss-variable-loader in webpack to be able to import CSS in JS?

I actually removed it. My question is really whether I need it or not. The documentation seems to suggest I can import them without the variable-loader.

[ai]

No. You can’t import CSS to JS files by default. You need some tool for that.

You can use CSS Modules, but it will import CSS classes, not variables.

[ai]

BTW, your question is not relevant with PostCSS. It is about webpack, you should go to webpack community.

[LunaticMuch]

Yeah thanks for that. Started here because of my genuine misunderstanding of the doc :(
I am trying to get the rid of postcss-variable-loader as it contains too many vulnerabilities and does not feel updated anymore