在前端开发中，我们经常使用 LESS 进行 CSS 的预处理。但是有时候，LESS 编译后的 CSS 文件可能会出现乱码的情况，这往往是由于缺失 @charset 声明导致的。本文将会介绍如何解决这个问题，让你的 CSS 文件保持良好的编码。
@charset 声明简介
在 CSS 文件中，@charset 声明是用来声明编码格式的。它告诉浏览器使用什么编码来解析 CSS 文件。如果你的 CSS 文件中使用了中文或其他非 ASCII 字符，那么这个声明就非常重要了。否则，浏览器可能会出现乱码的情况。
在 CSS 中，@charset 声明应该位于文件的开头。例如：
@charset "UTF-8"; /* CSS 样式 */
LESS 编译后缺失 @charset 声明的问题
LESS 是一种 CSS 预处理器，它可以生成符合 CSS 标准的样式表。在 LESS 编译成 CSS 文件时，它会将所有的 LESS 样式表组合在一起，并生成一份新的 CSS 样式表。但是，如果 LESS 文件中使用了中文或其他非 ASCII 字符，并且缺失了 @charset 声明，那么生成的 CSS 文件可能会出现乱码的情况。
例如，下面的 LESS 文件缺失了 @charset 声明：
/* 缺失 @charset 声明 */
body {
font-family: "微软雅黑";
}编译后生成的 CSS 文件如下：
body {
font-family: "微软雅黑";
}可以看到，CSS 文件中并没有 @charset 声明，这意味着浏览器可能无法正确解析它，从而导致出现乱码。
解决方案
为了解决 LESS 编译后缺失 @charset 声明导致乱码的问题，我们需要在 LESS 文件中增加 @charset 声明。
方案一：在 LESS 文件中增加 @charset 声明
要在 LESS 文件中增加 @charset 声明，只需要在文件开头添加即可。例如：
/* 增加 @charset 声明 */
@charset "UTF-8";
body {
font-family: "微软雅黑";
}这样，编译后生成的 CSS 文件就会包含 @charset 声明了：
@charset "UTF-8";
body {
font-family: "微软雅黑";
}这种方法很简便，只需要在 LESS 文件中增加一行代码即可，但是如果你的项目中有很多 LESS 文件，那么你需要为每个 LESS 文件都增加 @charset 声明，这会非常繁琐。
方案二：使用 Gulp 自动添加 @charset 声明
为了解决方案一中需要手动添加 @charset 声明的问题，我们可以使用 Gulp 来自动添加 @charset 声明。
在 Gulp 中，我们可以使用 gulp-replace 插件来搜索 LESS 文件中是否包含中文字符。如果找到了中文字符，就在文件开头添加 @charset 声明。下面是一个简单的例子：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - ------------------------
------------------------ -------- -- -
------ -------------------------
--------------------------------- -------- -- -
------ --------- ------------
---
--------------------------
---在上面的例子中，我们使用了正则表达式 /[\u4e00-\u9fa5]/g 来搜索中文字符。如果找到了中文字符，就在文件开头添加 @charset 声明。最后，我们将修改后的 LESS 文件保存到 dist 目录中。
结论
缺失 @charset 声明是导致 CSS 文件乱码的一个常见问题。在 LESS 编译后，如果缺失了 @charset 声明，生成的 CSS 文件也可能会出现乱码。为了解决这个问题，我们可以手动添加 @charset 声明，或者使用 Gulp 自动添加 @charset 声明。希望本文可以帮助你更好地处理 CSS 文件的编码问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fa77ac44713626014c92b9