LESS Compilation Produces Wrong Breakpoints in Production
A theme uses web/css/source/_extend.less to override @media breakpoints from the parent theme's _variables.less. In developer mode, the site renders correctly at 768px and 1024px. After deploying to production with setup:static-content:deploy -f, the tablet layout collapses to mobile at 768px. The theme's _module.less imports _variables.less with @import (reference), and the parent theme defines @screen__m: 768px in its own _variables.less. There are two store views with different locales; static deploy was run without --language. The build log shows the child theme's _extend.less compiled but the parent's _variables.less was loaded twice.
1. Why does the breakpoint differ between developer and production modes?
Read the worked answer
Two interacting causes. First, @import (reference) means the imported file's rules are available for mixins and variables but its selectors are not output - however, variable values still resolve at the point of import. If _extend.less imports _variables.less with (reference) before the parent's variables are loaded, the child's values win in dev (where each file is compiled independently and cached per file) but the production compiler concatenates sources in a different order, so the parent's @screen__m: 768px can override the child's value. Second, setup:static-content:deploy without --language deploys only the default locale; the second store view may fall back to a different compiled CSS bundle, or the deploy may skip the theme's locale-specific overrides. The _variables.less loaded twice indicates a duplicate @import - once via the theme's _extend.less and once via the parent's _module.less chain. Fix: import variables once, without (reference), in a single canonical file, and run setup:static-content:deploy -f --language en_US --language <second_locale>.
2. What verification steps confirm the fix before rollout?
Read the worked answer
Clear pub/static and var/view_preprocessed, run setup:static-content:deploy -f with both locales, then confirm the compiled CSS in pub/static/frontend/<Vendor>/<theme>/<locale>/css/styles-m.css contains the expected @media value (grep for 768px). Test in a browser at exactly 768px and 1024px in both store views. Also check that the parent's _variables.less appears once in the compiled output by searching for a sentinel variable. In developer mode, grunt exec/less can be used for fast iteration, but the production check must use the deployed bundle, because that is where the ordering bug manifests.