Quasar responsive margins not working even with cssAddon enabled

I'm using quasar framework v2.6.0 with vite and I read about responsive margins based on the screen size here: quasar flex-addons. In my application, I want to make right and left margins smaller or bigger based on the window size, or the platform used.

I have already tried to enable 'cssAddon:true' in my quasar.config file, under the 'framework' object, but it seems not to work.

framework: {
      config: {},
      cssAddon: true,
      // iconSet: 'material-icons', // Quasar icon set
      // lang: 'en-US', // Quasar language pack
      
      // For special cases outside of where the auto-import strategy can have an impact
      // (like functional components as one of the examples),
      // you can manually specify Quasar components/directives to be available everywhere:
      //
      // components: [],
      // directives: [],

      // Quasar plugins
      plugins: [],
    },

I'm aware of the screen plugin, but I prefer not to use it for performance purposes, as stated here: quasar screen plugin

Here is a piece of code of my application:

<div class="q-mx-xl q-mx-sm-sm q-mb-lg primary-font word-brake-auto-phrase">
    <div class="row q-mx-xl q-mx-sm-sm q-my-xl q-my-sm-sm justify-between">
      <div class="col-12 col-sm-auto col-md-auto">
        <p v-if="!showDescription" class="text-h4">
          Description
        </p>
        <p v-else class="text-h2">Other description</p>
      </div>
      <div class="col-12 col-sm-auto col-md-auto q-mt-sm">
        <q-btn
          class="button word-brake-auto-phrase bg-white text-black"
          outline
          to="/path"
        >
         To path
        </q-btn>
      </div>
    </div>
</div>

Any idea on how to resolve this?

I managed to solve it by myself. I imported the flex-addon module under the css prop in my quasar.config file, following the instructions here:

module.exports = configure(function (/* ctx */) {
  return {
        /** other config params here **/

        // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
        css: ['app.scss', '~quasar/src/css/flex-addon.sass'],

       
        /** other config params here **/

  };
};

In this way I was able to leverage breakpoints for margins and padding in my quasar application.

Hope this helps!