Vue.js + Vue-cli生产环境SCSS样式编译异常求助

问题分析 #

开发环境下，:deep()能正确将作用域属性[data-v-xxx]附加到父选择器.app-otp-input上，生成有效嵌套选择器；但生产构建时，作用域属性错误附加到:deep()包裹的子选择器.v-input__slot上，导致选择器匹配失败、样式失效。这是因为Vue CLI 4.x的CSS处理链在生产模式下，对Vue 2.7新增的:deep()语法解析逻辑与开发环境不一致，再加上旧版vue-loader的兼容性问题共同导致的。

解决方案 #

1. 调整:deep()写法 #

将:deep()的包裹范围调整为直接包含目标子选择器，避免嵌套在父选择器内部（Vue 2.7对这种写法的生产环境编译更稳定）：

:deep(.app-otp-input .v-input__slot) {
  max-height: 40px;
  min-height: 40px;
  margin-bottom: 0 !important;
  background: var(--v-primary-lighten-base) !important;
}

或者保持嵌套结构，改用旧版兼容的/deep/语法（适配当前低版本vue-loader）：

.app-otp-input {
  /deep/ .v-input__slot {
    max-height: 40px;
    min-height: 40px;
    margin-bottom: 0 !important;
    background: var(--v-primary-lighten-base) !important;
  }
}

2. 配置vue.config.js统一CSS编译逻辑 #

在项目根目录的vue.config.js中添加以下配置，确保生产与开发环境使用一致的CSS处理规则：

module.exports = {
  css: {
    loaderOptions: {
      css: {
        // 强制对齐开发环境的作用域解析逻辑
        modules: {
          mode: 'local',
          localIdentName: '[name]_[local]_[hash:base64:5]'
        }
      }
    },
    // 生产环境开启CSS提取时忽略顺序问题，避免编译逻辑异常
    extract: process.env.NODE_ENV === 'production' ? {
      ignoreOrder: true
    } : true
  }
}

3. 升级适配Vue 2.7的依赖包 #

Vue 2.7要求vue-loader版本至少为15.10.0，当前你使用的vue-loader:15版本过低，执行命令升级：

npm install vue-loader@^15.10.0 --save-dev

同时升级@vue/cli-service到4.x分支的最新稳定版，确保兼容Vue 2.7：

npm install @vue/cli-service@~4.5.19 --save-dev

4. 清除缓存后重新构建 #

执行以下命令清理旧依赖、缓存和构建产物，再重新执行生产构建：

rm -rf node_modules package-lock.json
npm install
npm run build

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