Sass Variable Override Limitations in Production Build Pipelines

Answers to the Core Questions

• Does the required Sass import order for overrides behave consistently across different build tool configurations? Yes. Every mainstream Sass compiler (sass, dart-sass, node-sass) and loader (webpack‑sass‑loader, Vite, Gulp‑sass) respects the rule that user variables must be declared before the core Bulma import. If the override file is imported after `@import "bulma";`, the override is ignored. The import order is purely a compile‑time concern; runtime tools do not alter it.
• Can production minification settings strip the CSS custom properties that some Bulma components rely on? Standard minifiers such as cssnano or PostCSS keep all custom‑property declarations. They only reduce whitespace, shorten names, and combine duplicate rules. However, purge tools (PurgeCSS, @fullhuman/postcss-purgecss, Tailwind purge) will remove any rule that cannot be proven to be used, including custom properties if the content paths are incomplete. Minification alone does not delete custom properties.
• What is a reliable way to verify that overrides survived the production build? Verify in two places:
  1. Static check: Open the final CSS file and search for the overridden value, e.g., `--bulma-primary: #ff0000;`. Its presence confirms the override survived the compile and minify steps.
  2. Runtime check: Load a minimal HTML page that includes the production CSS, then inspect a component (e.g., `.button.is-primary`) in the browser dev tools. The computed style should show the overridden custom property value.

Likely Explanation for Unexpected Loss of Overrides

The most common culprit is an over‑aggressive purge configuration. If the purge tool’s content array does not include all template files where Bulma components are rendered, the tool may flag the custom properties as unused and strip them. CSS modules or scoped styles that rename selectors can also confuse the purge logic, leading to accidental removal.

Practical Steps to Keep Overrides Intact

1. Import Order: In your main SCSS entry file, place the override file first:

   @import "src/styles/overrides.scss";
   @import "bulma/bulma";
   

2. Configure Purge: Use a purge tool that can detect custom properties. Example PostCSS config:

   module.exports = {
     plugins: [
       require('postcss-purgecss')({
         content: ['./src/**/*.html', './src/**/*.jsx', './src/**/*.tsx'],
         defaultExtractor: content => content.match(/([A-Za-z0-9-_:/]+)+/g) || [],
         safelist: [/^--bulma-/]
       }),
       require('cssnano')({ preset: 'default' })
     ]
   };
   

3. Test Build: Run the production build and open the resulting main.css file. Search for the overridden custom property.
4. Runtime Validation: Deploy the bundle to a staging environment and open a page that uses Bulma components. Inspect computed styles to confirm the custom property value.
5. Automate Verification: Add a simple Stylelint rule to check for the presence of expected custom properties before deployment.

Missing Diagnostic Detail Needed?

If you’re still seeing the default values after following these steps, please share the purge tool you’re using and the content paths configured for it. That will help determine whether the tool is mistakenly removing the custom properties.