Vue2 npm run build Error: CSS minification error: Lexical error on line 1: Unrecognized text.

一、错误整理

1、错误信息

vue2 npm run build Error: CSS minification error: Lexical error on line 1: Unrecognized text.

  Erroneous area:
  1: 100% - $pl
^.........^. File: css/bigScreen.508a51a8.css
Error: CSS minification error: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: 100% - $pl

2、报错写法

@mixin common-height($height: 60px) {
  height: $height;
}

3、错误原因

该错误由 CSS 预处理器（如 SCSS）中 calc 函数内的变量使用不规范导致。当变量 $pl 未被正确解析时，压缩工具（如 cssnano）会误判语法结构，引发词法错误 Unrecognized text

二、正确写法

1、使用 #{} 包裹变量

@mixin common-height($height: 60px) {
  height: #{$height};
}

2、清理缓存并重建依赖

rm -rf node_modules  # 清除旧依赖
npm cache clean --force  # 清理 npm 缓存
npm install  # 重新安装依赖

3、验证 CSS 加载器配置

{
  test: /\.scss$/,
  use: [
    'style-loader',
    'css-loader',
    'postcss-loader',  // 在后阶段处理压缩
    'sass-loader' // 优先编译 SCSS
  ]
}

欢迎关注VX公众号：前端小知识营地