解决使用 LESS 时 import 外部 CSS 文件不生效的问题
在前端开发中，我们经常会使用 LESS 这种 CSS 预处理器来提高我们的开发效率和代码可维护性。但是在使用 LESS 时，我们经常会遇到一个问题，那就是 import 外部 CSS 文件不生效的问题。这个问题可能会让我们的开发工作受到一些限制，因此需要解决这个问题。
问题原因
在 LESS 中引入外部 CSS 文件时，我们通常使用 @import 关键字来引入。但是这个关键字在 LESS 中是有一些限制的，它不能像引入 LESS 文件一样直接引入外部 CSS 文件。如果我们直接在 LESS 文件中使用 @import 引入外部 CSS 文件，那么这个外部 CSS 文件的样式是不会生效的。
解决方案
为了解决这个问题，我们需要借助 LESS 的一个特性，那就是 @import 支持别名。我们可以使用一个别名来代替我们要引入的外部 CSS 文件，然后在编译时将这个别名替换成我们要引入的外部 CSS 文件路径。
具体来说，我们可以在项目中新建一个样式文件夹，将我们需要引用的外部 CSS 文件放在这个文件夹中。然后，在我们要使用这个外部 CSS 文件的 LESS 文件中，我们可以定义一个别名来代替这个外部 CSS 文件，例如：
@import "styles/common.css" as common;
这个语句定义了一个别名 common，它表示引入 styles/common.css 这个外部 CSS 文件。然后，在我们的样式代码中，我们就可以使用这个别名来引用外部 CSS 文件中的样式了，例如：
div {
@common;
}这个语句表示将 common 别名所表示的外部 CSS 文件中的所有样式应用到 div 元素上。
最后，在编译 LESS 文件时，我们可以使用 less-loader 这个 webpack 插件来将别名替换成外部 CSS 文件路径。具体来说，我们可以在 webpack.config.js 中配置 less-loader，例如：
-- -------------------- ---- -------
------- -
------ -
-
----- ----------
---- -
-
------- --------------
-------- -
----------- -
------- --------------------
--
----------- -
---------------- ---------
-
-
-
-
-
-
-这个配置中，我们使用 globalVars 选项来设置别名 common，它被映射到了 styles/common.css 这个外部 CSS 文件的路径上。由于我们的样式代码中使用了这个别名，less-loader 在编译时就会将这个别名替换成正确的外部 CSS 文件路径，从而让外部 CSS 文件的样式生效。
总结
在使用 LESS 时，我们可能会遇到 import 外部 CSS 文件不生效的问题。这个问题的原因在于 @import 关键字不能直接用于引入外部 CSS 文件。为了解决这个问题，我们可以利用 LESS 的别名特性，将要引入的外部 CSS 文件用一个别名表示，然后在编译时将这个别名替换成正确的文件路径。通过这种方式，我们就可以让外部 CSS 文件的样式生效了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6488062748841e9894687b78