How do I keep my existing CSS when compiling LESS?

Question

I always use a predefined CSS Reset as well as WordPress Core CSS along with my upcoming CSS in any project that I work on. I did not have a problem before I use LESS.

When I write new LESS code and compiled it through SimpLESS or any other compiler, I just get my existing CSS (Reset, WP Core) code removed from my stylesheet (.css) and it gets updated with the new compiled CSS.

It's really annoying for me as I'm using LESS for the first time.

So, how to I keep my existing CSS and the compiled CSS both at once?

Did you try importing the rest of the CSS files in your LESS file ? Like: @import "reset.css"; — Tushar Khatiwada
– Tushar Khatiwada, Commented Sep 21, 2015 at 16:23
No, my other exiting CSS code is in the style.css. I want like this: What I write in the style.less file, will immediately inset after the exiting code in style.css — Ariful Islam Shaon
– Ariful Islam Shaon, Commented Sep 21, 2015 at 16:25
@Tushar: Now I understand what you meant to me by importing. Thank you too. :) — Ariful Islam Shaon
– Ariful Islam Shaon, Commented Sep 21, 2015 at 16:41

Benson · Accepted Answer · 2015-09-21 16:36:19Z

1

Two options:

Put your existing CSS in your LESS code. Your LESS code will overwrite your css file on every save, so you'll manage all of your styles with LESS.
Change the name of your LESS file so you're not overwriting your existing CSS code, then put links to both stylesheets in your HTML document, or by putting this line in your LESS file:
```
@import (css) "foo.css";
```

edited Sep 21, 2015 at 16:36

answered Sep 21, 2015 at 16:24

Benson

4,4312 gold badges29 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Destination Designs · Accepted Answer · 2015-09-21 16:45:04Z

0

why dont you compile your less to a separate style sheet and include both in your page head? The problem is if you are compiling from style.less to style.css without including your existing css code in your less, it will overwrite the file not append to it.

So either use the solution above and include your existing css in your less, or compile to a different file name and include both css files in your document head.

answered Sep 21, 2015 at 16:45

Destination Designs

6831 gold badge5 silver badges17 bronze badges

1 Comment

Ariful Islam Shaon Over a year ago

Yes, it was my mistake as I'm using LESS for the first time in real life development. Now, I got the solution from Benson's reply in the above.

Collectives™ on Stack Overflow

How do I keep my existing CSS when compiling LESS?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related