LESS 编译后样式表不兼容 Safari 浏览器的解决方法

在前端开发中，我们经常使用 LESS 来编写样式表，它可以让我们更加方便地管理样式，提高开发效率。但是，有时候我们会遇到一个问题，就是 LESS 编译后的样式表在 Safari 浏览器中不兼容，导致页面样式错乱。本文将介绍这个问题的原因以及解决方法。

问题原因

LESS 会将样式表编译成 CSS，但是它编译出来的 CSS 有一些特殊的语法，在某些浏览器中可能会出现兼容性问题。其中，Safari 浏览器对于一些特殊语法的支持不太好，导致编译后的样式表在 Safari 中无法正常显示。

具体来说，就是 LESS 中使用了类似以下代码的语法：

.box {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

上面的代码中，我们使用了 transform 属性来旋转 .box 元素，同时为了兼容 Safari 浏览器，我们还添加了 -webkit-transform 属性。但是，编译后的 CSS 中只会保留 transform 属性，而 -webkit-transform 属性会被删除，这就导致了在 Safari 中无法正常显示样式。

解决方法

针对这个问题，我们可以采取以下两种解决方法：

1. 使用 Autoprefixer

Autoprefixer 是一个 PostCSS 插件，它可以自动为 CSS 添加浏览器前缀，从而解决兼容性问题。我们只需要在 LESS 中使用未添加前缀的语法，然后在编译后的 CSS 中使用 Autoprefixer 添加前缀即可。

首先，我们需要安装 Autoprefixer：

npm install autoprefixer postcss-cli --save-dev

然后，在项目根目录下新建一个 postcss.config.js 文件，添加以下代码：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

接着，在 package.json 文件中添加以下代码：

"scripts": {
  "build:css": "postcss src/index.less -o dist/index.css"
}

最后，在 LESS 文件中使用未添加前缀的语法，例如：

.box {
  transform: rotate(45deg);
}

运行以下命令编译 LESS 文件：

npm run build:css

这样，编译后的 CSS 文件中会自动添加浏览器前缀，从而解决兼容性问题。

2. 手动添加前缀

如果你不想使用 Autoprefixer，也可以手动为样式添加浏览器前缀。例如，我们可以将上面的 LESS 代码修改为：

.box {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

这样，编译后的 CSS 文件中就会包含浏览器前缀，从而解决兼容性问题。

总结

LESS 编译后的样式表在 Safari 浏览器中不兼容，这是由于 LESS 中的特殊语法在某些浏览器中无法正常显示。我们可以使用 Autoprefixer 自动为 CSS 添加浏览器前缀，或者手动添加前缀来解决兼容性问题。无论使用哪种方法，都可以让我们更加方便地管理样式，提高开发效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c85e75add4f0e0ff234183