防止 Angular CLI 编译更少的文件答案

【问题标题】：Prevent Angular CLI from compiling less files防止 Angular CLI 编译更少的文件
【发布时间】：2017-12-12 22:26:22
【问题描述】：

我正在尝试使用较少的变量将动态主题应用于我的网站。这是一个简化的场景：

文件：site.less

@primary-color: 'red'

文件：foobar.component.less

@import '../site.less';
.some-element {
    background-color: @primary-color;
}

这适用于初始页面加载并且背景颜色为红色。但现在我想要一个具有多种颜色选项的下拉颜色选择器。当用户选择绿色而不是红色时，我想使用 less 函数less.modifyVars({'@primary-color', 'green'})，这不会导致任何变化。这是因为 Angular cli 将 less 预编译到 css 中，所以浏览器永远不会看到 less 文件。

所以我在想，如果 Angular 不将 less 文件编译成 css，那么当调用 modifyVars 时，浏览器会接收到更改。

如何告诉 Angular 不要将 less 编译成 css？

【问题讨论】：

你可能需要使用 cli 的 eject 命令并将 webpack 配置为不编译少。
我对那个命令并不完全熟悉，这是否意味着我不再使用 Angular CLI 进行构建，而是使用原生 webpack？
正确，它使您可以完全控制构建
我会试试看能不能让它工作。同时，您能否提交此作为问题的解决方案？如果我让它工作，我会将其标记为已接受的解决方案

标签： angular less angular-cli

【解决方案1】：

您可以使用 Angular cli 的 ng eject 命令。这将弹出一个 webpack 配置文件，让您可以完全控制构建命令的构建方式。

旁注：我不认为恢复ng eject 是不可能的，但我了解到这并不总是一个简单的过程。特别是当 Angular cli 团队通过了多个版本时，向构建命令添加/修改功能。

【讨论】：

我决定完全采用不同的方法，因为我看到多个来源（包括 less 本身）提到不要在浏览器中编译。但就这个问题而言，这是正确的答案。
@heilch 是的，我肯定会推荐一种不同的方法。这进入了构建过程的杂草。

【解决方案2】：

为什么不在 less 文件中更改变量名？

【讨论】：

CLI 在访问浏览器之前在服务器上编译 less。它直接在 css 中用十六进制值替换变量的所有实例，这就是提供给浏览器的内容。从浏览器的角度来看，从来没有一个变量可以重命名
通过哪种方式将 site.less 与 Angular 连接起来？
在 .angular-cli.json 文件中有一个“样式”的配置数组，我在那里包含了 less 文件。据我所知，在编译期间刚刚拾取了组件较少的文件
如何将此文件添加到 index.html 文件并从 angular-cli.json 中删除？
我试过了。它允许我修改 site.less 文件中的变量，但 foobar.component.less 文件中的任何内容都保持静态。我需要 Angular cli 来忽略所有较少的文件并按原样提供它们