如何通过@sencha/ext-webpack-plugin配置禁用ExtReact项目中sencha-fashion的CSS变量生成

I’ve run into this exact issue with ExtReact 7.4.0, sass-loader@10.2.0, and node-sass@6.0.1—manually editing the defaults.json in node_modules works but gets wiped every time you reinstall dependencies. The good news is you can permanently override that cssVars.enable setting directly in your webpack config using the @sencha/ext-webpack-plugin options, no node_modules hacks required.

Here’s how to do it: #

• Open your project’s webpack.config.js (or your primary webpack configuration file).
• Locate the ExtWebpackPlugin instance in the plugins array.
• Add a fashion property to the plugin’s configuration object, and set cssVars.enable to false.

Here’s a before-and-after example of what your config will look like:

Before:

const ExtWebpackPlugin = require('@sencha/ext-webpack-plugin');

module.exports = {
  // ... other webpack settings
  plugins: [
    new ExtWebpackPlugin({
      framework: 'react',
      toolkit: 'modern',
      // existing ExtReact config options
    })
  ]
};

After:

const ExtWebpackPlugin = require('@sencha/ext-webpack-plugin');

module.exports = {
  // ... other webpack settings
  plugins: [
    new ExtWebpackPlugin({
      framework: 'react',
      toolkit: 'modern',
      // Add this section to override fashion's cssVars setting
      fashion: {
        cssVars: {
          enable: false
        }
      },
      // existing ExtReact config options
    })
  ]
};

Why this works: #

The @sencha/ext-webpack-plugin passes the fashion configuration directly to Sencha’s fashion compiler, overriding the default values in defaults.json. This means your setting stays intact even when you delete node_modules or run npm install/yarn install again.

Verify the fix: #

After updating your config, rebuild your project. Check the compiled CSS output—you’ll no longer see those CSS variable rules like color: var(--base-foreground-color);, and your component should behave as expected in Chrome 93.x and Edge 93.x.

This solution plays nicely with your locked dependency versions since it doesn’t require upgrading sass-loader, node-sass, or ExtReact itself.

内容的提问来源于stack exchange，提问作者Dimitrij