Less编译致主CSS文件异常，求不影响体验的正确写法

你遇到的压缩失败，本质是CSS语法错误：原来的.custom-font()混入里包含了&:before伪类，而你在@font-face规则内部调用了这个混入，导致编译后的CSS出现了@font-face { ... :before { ... } }这种非法结构——@font-face是用来定义字体的规则，根本不允许嵌套伪类选择器，压缩工具碰到这种无效代码直接报错。

方案1：拆分混入，分离字体定义与伪类逻辑 #

把原来的混合宏拆成两个独立的部分，彻底避免在@font-face里引入伪类：

1. 修改utility.less #

// 基础字体平滑样式（给普通选择器用）
.custom-font-base() {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: normal;
  font-style: normal;
}

// 伪类专属样式（仅用于需要:before的元素）
.custom-font-before() {
  &:before {
    .custom-font-base();
    content: attr(data-icon); // 这里放你的伪类内容，比如字体图标编码
    // 其他伪类专属样式都放这里
  }
}

2. 修改fonts.less #

// 纯字体定义，不要加任何混入
@font-face {
  font-family: 'CustomIcons';
  src: url('../fonts/custom-icons.eot');
  src: url('../fonts/custom-icons.eot?#iefix') format('embedded-opentype'),
       url('../fonts/custom-icons.woff2') format('woff2'),
       url('../fonts/custom-icons.woff') format('woff'),
       url('../fonts/custom-icons.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

// 给需要用这个字体的类绑定样式
.icon {
  font-family: 'CustomIcons';
  .custom-font-base();
}

// 需要用:before伪类的元素单独绑定
.icon-with-before {
  .custom-font-before();
}

3. app.less保持原样 #

@import 'utility.less';
@import 'fonts.less';

这样编译后的CSS完全符合语法规范，压缩工具能正常处理，字体平滑和伪类功能也和原来一致。

方案2：调整混入调用时机（不拆分混入） #

如果不想改混入结构，只要把.custom-font()的调用从@font-face内部移到普通的类选择器里就行：

1. utility.less保留原混入 #

.custom-font() {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: normal;
  font-style: normal;

  &:before {
    content: attr(data-icon);
    // 其他伪类样式
  }
}

2. 修改fonts.less #

// 纯字体定义，无混入
@font-face {
  font-family: 'CustomIcons';
  src: url('../fonts/custom-icons.eot');
  src: url('../fonts/custom-icons.eot?#iefix') format('embedded-opentype'),
       url('../fonts/custom-icons.woff2') format('woff2'),
       url('../fonts/custom-icons.woff') format('woff'),
       url('../fonts/custom-icons.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

// 在类选择器里调用混入，生成合法的伪类结构
.custom-icon {
  font-family: 'CustomIcons';
  .custom-font();
}

这样编译后的CSS会生成.custom-icon:before的合法规则，压缩不会报错。

方案3：验证你已修改的写法正确性 #

如果你已经调整了fonts.less里的@font-face写法，只要满足两个条件就是正确的：

1. @font-face本身语法合法：font-family名称正确，src路径和格式声明无误
2. 字体平滑和伪类样式被正确应用到对应的DOM元素上（用浏览器开发者工具检查元素的字体属性和伪类渲染情况）

• 永远不要在@font-face、@media这类CSS规则内部嵌套伪类选择器，这是违反CSS语法规范的
• 混入的作用域要清晰：含伪类的混入只能用于普通的类、元素选择器，不能用于规则块内部

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