heilch heilch - 3 months ago 56
Less Question

Prevent Angular CLI from compiling less files

I am trying to apply a dynamic theme to my site using less variables. Here's a simplified scenario:

File: site.less

@primary-color: 'red'

File: foobar.component.less

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

This works just fine for the initial page load and the background color is red. But now I want a drop down color selector with multiple color options. When the user selects green instead of red I want to use the less function less.modifyVars({'@primary-color', 'green'}), which results in no change. This is because angular cli is pre-compiling the less into css, so the browser never sees the less files to begin with.

So I am thinking if Angular does not compile the less files into css, then the browser will pick up on the changes when modifyVars is called.

How do I tell Angular not to compile less into css?

Answer Source

You can use angular cli's ng eject command. This will eject a webpack configuration file which will give you full control on how the build commands build.

Side Note: I don't believe it's impossible to revert ng eject, but I've read that it is not always an easy process. Especially when multiple versions have passed with the angular cli team adding/modifying functionality to the build commands.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download