Diagnosing and Fixing Unwanted CSS Output from Less Mixin Imports

Problem: Unwanted CSS rules appear in compiled output

When a Less file that only contains mixins, variables, or functions is imported without the (reference) flag, the Less compiler treats it as regular CSS and emits its contents into the final stylesheet. This creates duplicate rule sets and can bloat the output.

Recognizable condition

• Generated CSS contains rule sets that originate from a file you intended only for reusable abstractions.
• The imported file has no selectors of its own.
• Removing the import eliminates the duplicate rules but also removes access to its mixins/variables.

Cause / diagnostic table

Ordered checks

1. Locate the import line in your main Less file. Verify it looks like @import "mixins.less"; without any flags.
2. Check the Less compiler version: run lessc -v (or consult your build tool's configuration). Ensure it reports 2.7.0 or higher.
3. If you use a build tool (e.g., gulp-less, webpack less-loader), examine its options for any setting that might drop import flags.
4. Recompile the project and inspect the generated CSS. Look for the rule sets that should not be present.
5. Confirm that mixins and variables from the imported file are still usable by adding a test rule that uses one, recompiling, and verifying the rule appears in the output.

Fixes tied to findings

• Add the (reference) flag: change the import to @import (reference) "mixins.less";. This tells the compiler to import the symbols but not to output the file’s own CSS.
• Upgrade Less: if the version is below 2.7.0, upgrade to a recent release (e.g., via npm install less@latest) so the flag is recognized.
• Adjust build tool configuration: ensure the loader or task does not strip import options. For webpack, verify that less-loader is passed { lessOptions: { strictMath: true } } without a custom importLoaders that rewrites imports. For gulp, confirm you are not using a plugin that rewrites @import statements.
• Test the fix: after making the change, run the build again and verify that the duplicate rules disappear while your test rule using a mixin still compiles correctly.

Escalation criteria

If after applying the above steps you still see unwanted CSS:

• Check for other import modifiers like (inline) or (less) that might conflict with (reference); consult the Less documentation for allowed combinations.
• Look for post‑processors (e.g., cssnano, clean‑css) that could be re‑introducing the rules; temporarily disable them to isolate the issue.
• Consider splitting the file: keep pure mixins/variables in a file imported with (reference) and move any actual CSS rules to a separate file that is imported normally.
• If the problem persists, file an issue with the Less compiler or your build tool, providing the exact Less version, build tool version, and a minimal reproduction.