Angular项目中需在每个组件LESS文件重复导入通用文件？

嘿，完全不用每次都手动导入通用LESS文件！这是因为Angular CLI默认会单独编译每个组件的样式文件，所以全局styles.less里的导入不会自动传递给组件样式。不过我们可以通过配置让预处理器自动帮我们完成导入，步骤如下：

方法一：配置全局自动导入（推荐） #

1. 打开你的angular.json（旧版本Angular CLI用angular-cli.json），找到项目的build配置节点下的options。
2. 添加stylePreprocessorOptions配置，指定通用样式的路径，并且设置自动导入的内容：

"build": {
  "options": {
    // 其他已有的配置...
    "stylePreprocessorOptions": {
      "includePaths": ["./src/styles"], // 告诉预处理器去哪里找通用样式文件
      "additionalData": "@import 'general.less';" // 自动在每个组件样式前导入这个文件
    }
  }
}

注意：如果你的Angular版本是10及以下，把additionalData换成data即可。

配置完成后，重启你的Angular开发服务器，现在你在任何组件的LESS文件里直接用.pointer混合器或者general.less里的变量，都不会再报“undefined”的错误了！

方法二：简化导入路径（可选，适合不想全局自动导入的场景） #

如果你不想全局自动导入，只是想简化导入的路径，只需要配置includePaths：

"stylePreprocessorOptions": {
  "includePaths": ["./src/styles"]
}

之后在组件LESS文件里导入通用文件时，就可以直接写：

@import 'general';

不用再写冗长的相对路径../../styles/general.less了。

这样是不是方便多了？再也不用重复写导入语句啦！

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