Vue2+Webpack2项目Autoprefixer在钉钉iOS8.3环境失效求助

Hey there, let's dig into your issue and fix it step by step!

First, let's address the two core problems: #

1. Less styles being ignored
2. Autoprefixer not adding -webkit- prefixes for iOS 8.3 DingTalk

Problem 1: Less styles are ignored

Your Webpack config doesn't have any rules to process .less files—Webpack has no idea how to parse them, so it just skips over them entirely. Here's how to fix that:

Add this rule to the module.rules array in your webpack.base.conf.js:

{
  test: /\.less$/,
  use: [
    'vue-style-loader',
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        sourceMap: sourceMapEnabled // Reuse the sourceMap variable from vue-loader.conf
      }
    },
    'less-loader'
  ]
}

Also, make sure you've installed the required dependencies:

npm install less less-loader --save-dev

Problem 2: Autoprefixer not working in DingTalk iOS 8.3

There are two main issues with your config here: conflicting PostCSS settings and incomplete browser targeting.

Step 1: Fix conflicting PostCSS configurations

You've defined Autoprefixer in both vue-loader.conf.js and .postcssrc.js—this creates conflicts where one config overrides the other. Remove the redundant PostCSS setup from vue-loader.conf.js:

Update vue-loader.conf.js to look like this:

'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
  // Delete the entire `options.postcss` block here
}

Step 2: Target iOS 8 explicitly for Autoprefixer

DingTalk on iOS 8.3 uses the older UIWebView (not WKWebView), which requires explicit -webkit- prefixes for flexbox. Let's refine your browser targeting to ensure Autoprefixer generates the right code:

1. Add a browserslist field to your package.json (this lets all tools like Autoprefixer share the same browser targets):

"browserslist": [
  "iOS >= 8",
  "Android >= 4.0",
  "last 2 versions",
  "> 1%"
]

2. Simplify your .postcssrc.js to use this shared config (no need to duplicate browser targets):

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "precss":{},
    "postcss-calc":{},
    "autoprefixer": {} // Autoprefixer will auto-read browserslist from package.json
  }
}

Why this works: #

• The new Less loader rule tells Webpack how to compile .less files into CSS, so your styles won't be ignored anymore.
• Removing duplicate PostCSS config ensures your .postcssrc.js settings take full effect.
• Explicitly targeting iOS >=8 makes Autoprefixer generate -webkit-flex and other necessary prefixes for the older UIWebView used by DingTalk on iOS 8.3.

After making these changes, rebuild your project and test it in DingTalk again—it should render correctly now!

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