CODEWITHSUNDEEP
less
Dimitar Christoff
Dimitar Christoff

Reputation: 26165

conditional @import in .less or no error when file missing

I need to conditionally import a file during a particular type of build. Using [email protected] which is on top of [email protected]

What I tried thus far...

Trying to use protected mixins to determine the type of build I require and namely, to skip imports of certain less files that break in dev mode.

@isProduction: 1;

...

.getImports() when (@isProduction = 1){
}

.getImports() {
    @import "productionStyles";
}

...
.getImports();

however, this seems to fail and it tries to import and parse productionStyles.less all the time. I guess protected mixins does not cover @import, so how would you solve that?

I also tried

@productionStyles: "productionStyles"; // or 0

...
@productionStyles: 0;


.getImports() when not (@productionStyles = 0){
    @import "@{productionStyles}";
}

...

to same avail, it will try to import it anyway >> FileError: '0.less' wasn't found in ....

I am starting to think it will need a bigger refactor where devStyles and productionStyles are both a thing and I just switch between them - it's just that productionStyles was an addition that can only compile after a full build due to deps and I would much rather solve this by compiling conditionally.

I can also move away from using grunt-contrib-jshint and write my own less parser but would like to explore the built-in options first.

As the productionStyle.less references several files that are not in the file system, is it possible to ignore the @imports that fail and continue building? I would prefer not to disable error checking/break on all errors due to possible parser errors elsewhere...

Upvotes: 2

Views: 2886

Answers (1)

Michał Rybak
Michał Rybak

Reputation: 8706

I've solved your problem using switch parameter:

index.html

  <!DOCTYPE html>
  <html>
    <head>
      <title></title>
      <link rel="stylesheet/less" type="text/css"  href="style.less" />
      <script src="less.js" type="text/javascript"></script>
    </head>
    <body>
      [foo]
    </body>
  </html>

style.less

.mixin(production) {
  @import "test.less";
  background: @color;
}

.mixin(dev) {
  background: green;
}

html {
  .mixin(production);
}

test.less

@color: red;

less.js is less v1.4.1 downloaded straight from project page.

Code about should result in red background. Switching to html { .mixin(dev); } disables @import and background turns green.

It's possible that your solution would work, too, but you have errors in HTML or something like that - I haven't checked that.

Upvotes: 3

Related Questions