阻止 Angular CLI 编译 less 文件

Question

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

文件：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？

Answer 1

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

Answer 2

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

旁注：我不认为恢复 ng eject 是不可能的，但我了解到这并不总是一个简单的过程。特别是当多个版本通过 angular cli 团队 adding/modifying 功能传递给构建命令时。

阻止 Angular CLI 编译 less 文件

Prevent Angular CLI from compiling less files

less

angular-cli

angular