Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

less import mess? #4659

Closed
BerndWessels opened this issue Nov 8, 2015 · 6 comments · Fixed by #6826
Closed

less import mess? #4659

BerndWessels opened this issue Nov 8, 2015 · 6 comments · Fixed by #6826

Comments

@BerndWessels
Copy link

Hi

I use the latest webpack and less loader and compiler and try to import ui-grid in my project.

But it seems that the less files are structured very unfortunate. It is not possible to just do this:

@import '~angular-ui-grid/less/main.less';
@bootstrapDirectory: "../../../../node_modules/bootstrap";
@font-path: '../';

or this

@bootstrapDirectory: "../../../../node_modules/bootstrap";
@font-path: '../';
@import '~angular-ui-grid/less/main.less';

The only way I got that working was to do this:

@import '~angular-ui-grid/less/variables.less';
@import (reference) '~angular-ui-grid/less/bootstrap/bootstrap.less';
@import '~angular-ui-grid/less/elements.less';
@import '~angular-ui-grid/less/main.less';
@bootstrapDirectory: "../../../../node_modules/bootstrap";
@font-path: '../';

But this is obviously an ugly workaround and it would be better if the ui-grid less files could be restructured to support simple imports and overrides.

Thanks
Bernd

@luchsamapparat
Copy link

I second this. From what I understand there are several problems with the current state.

The LESS Grunt task compiles the main stylesheet, stylesheets from the individual features as well es some generated font stylesheet into one stylesheet:

'src/less/main.less', 'src/features/*/less/**/*.less', '.tmp/font/ui-grid-codes.css'

  • The main.less includes the complete Bootstrap stylesheet and the variables. So if I already have Bootstrap included in my project (or maybe even have a customized Bootstrap build), the stylesheet gets unnecessarily bloated and doesn't take my Boopstrap customizations into consideration.
  • As the feature stylesheets are included using a glob, I cannot just include them into my own stylesheet. Instead I have to include them into my own LESS compilation task (Gulp or Grunt).
  • I cannot reference the font stylesheet from my own stylesheet as it only exists while building the ui-grid project. When I include it as a bower dependency, I wouldn't normally build ui-grid myself.

In summary, if I want to use my own Bootstrap distribution and want to change variables in the variables.less, I need to adapt a large part of the ui-grid build process into mine which is a bit of a overkill.

As an improvement I would suggest three separate stylesheets:

  1. ui-grid.less/css which includes bootstrap.less, variables.less and main.less (which does not contain variables and bootstrap anymore). I
  2. ui-grid-features.less/css which includes the variables.less and feature stylesheets explicitly
  3. ui-grid-codes.css which is the file which currently only exists during build time in the tmp directory.

That way, I could override ui-grid.less and include my own variables.less or remove ui-grid's bootstrap. The same applies for ui-grid-features.less. Here, I could also use my own variables.less instead of the standard one. Furthermore, it would be possible to exclude some of the feature stylesheets if I am not using them. And the ui-grid-codes could still be included without having to run ui-grid's build process.

Of course, I make this suggestion under the assumption that I understood the build and compilation process correctly ;-) So if there's already a way to achieve all of this, every suggestion is appreciated.

@dan2k3k4
Copy link

I've not been able to build the ui-grid.css with overriding the variables to use Bootstrap, can anyone point me in the right direction?

I have a ui-grid.less file with:

@bootstrapDirectory: "../js/vendor/bootstrap";
@import '../js/vendor/angular-ui-grid/less/variables.less';

@import (reference) '../js/vendor/angular-ui-grid/less/bootstrap/bootstrap.less';

@import (reference) '../js/vendor/angular-ui-grid/less/cellnav/less/cellNav.less';
@import (reference) '../js/vendor/angular-ui-grid/less/edit/less/edit.less';
@import (reference) '../js/vendor/angular-ui-grid/less/expandable/less/expandable.less';
@import (reference) '../js/vendor/angular-ui-grid/less/exporter/less/exporter.less';
@import (reference) '../js/vendor/angular-ui-grid/less/grouping/less/grouping.less';
@import (reference) '../js/vendor/angular-ui-grid/less/importer/less/importer.less';
@import (reference) '../js/vendor/angular-ui-grid/less/move-columns/less/colMovable.less';
@import (reference) '../js/vendor/angular-ui-grid/less/pagination/less/pagination.less';
@import (reference) '../js/vendor/angular-ui-grid/less/pinning/less/pinning.less';
@import (reference) '../js/vendor/angular-ui-grid/less/resize-columns/less/column-resizer.less';
@import (reference) '../js/vendor/angular-ui-grid/less/row-edit/less/rowEdit.less';
@import (reference) '../js/vendor/angular-ui-grid/less/selection/less/selection.less';
@import (reference) '../js/vendor/angular-ui-grid/less/tree-base/less/tree-base.less';
@import (reference) '../js/vendor/angular-ui-grid/less/tree-view/less/tree-view.less';

@import '../js/vendor/angular-ui-grid/less/elements.less';
@import '../js/vendor/angular-ui-grid/less/main.less';

@import (reference) '../js/vendor/bootstrap/less/variables.less';
@import "ui-grid.variables.less";

However this seems to miss out quite a few things (and doesn't build properly: overrides some of my images with a weird border-top-right-radius of 40px...

@BerndWessels
Copy link
Author

Is anybody looking into this?

@rbaras
Copy link

rbaras commented Mar 17, 2016

I'm using less 2.6.1. I've been able to build the css file when no ui-grid features are included, this way:

#ui-grid-twbs {
  @import (reference, multiple) "node_modules/bootstrap/less/bootstrap";
}
@import 'node_modules/angular-ui-grid/less/grid';
@import 'node_modules/angular-ui-grid/less/header';
@import 'node_modules/angular-ui-grid/less/body';
@import 'node_modules/angular-ui-grid/less/cell';
@import 'node_modules/angular-ui-grid/less/footer';
@import 'node_modules/angular-ui-grid/less/menu';
@import 'node_modules/angular-ui-grid/less/sorting';
@import 'node_modules/angular-ui-grid/less/icons';
@import 'node_modules/angular-ui-grid/less/rtl';
@import 'node_modules/angular-ui-grid/less/animation';
@import 'node_modules/angular-ui-grid/less/elements';
@import 'node_modules/angular-ui-grid/less/variables';

# Font

@font-face {
  font-family: 'ui-grid';
  src: url('../fonts/ui-grid.eot');
  src: url('../fonts/ui-grid.eot#iefix') format('embedded-opentype'), url('../fonts/ui-grid.woff') format('woff'), url('../fonts/ui-grid.ttf') format('truetype'), url('../fonts/ui-grid.svg?#ui-grid') format('svg');
  font-weight: normal;
  font-style: normal;
}

# Icons

.ui-grid-tree-header-row {
font-weight: bold !important;
}

.ui-grid-icon-plus-squared:before {
content: '\c350';
}
/ '썐' /
.ui-grid-icon-minus-squared:before {
content: '\c351';
}
/ '썑' /
.ui-grid-icon-search:before {
content: '\c352';
}

# More icons...

I've tried to also include the ui-grid features less files (I need at least ui.grid.pagination), this way:

@import 'node_modules/angular-ui-grid/less/variables';
@bootstrapDirectory: "node_modules/bootstrap";

#ui-grid-twbs {
  @import (reference, multiple) "node_modules/bootstrap/less/bootstrap";
}

@import 'node_modules/angular-ui-grid/less/animation';
@import 'node_modules/angular-ui-grid/less/body';
@import 'node_modules/angular-ui-grid/less/cell';
@import 'node_modules/angular-ui-grid/less/elements';
@import 'node_modules/angular-ui-grid/less/footer';
@import 'node_modules/angular-ui-grid/less/goups';
@import 'node_modules/angular-ui-grid/less/grid';
@import 'node_modules/angular-ui-grid/less/header';
@import 'node_modules/angular-ui-grid/less/icons';
@import 'node_modules/angular-ui-grid/less/menu';
@import 'node_modules/angular-ui-grid/less/rtl';
@import 'node_modules/angular-ui-grid/less/sorting';

@import 'node_modules/angular-ui-grid/less/cellnav/less/cellNav.less';
@import 'node_modules/angular-ui-grid/less/edit/less/edit.less';
@import 'node_modules/angular-ui-grid/less/expandable/less/expandable.less';
@import 'node_modules/angular-ui-grid/less/exporter/less/exporter.less';
@import 'node_modules/angular-ui-grid/less/grouping/less/grouping.less';
@import 'node_modules/angular-ui-grid/less/importer/less/importer.less';
@import 'node_modules/angular-ui-grid/less/move-columns/less/colMovable.less';
@import 'node_modules/angular-ui-grid/less/pagination/less/pagination.less';
@import 'node_modules/angular-ui-grid/less/pinning/less/pinning.less';
@import 'node_modules/angular-ui-grid/less/resize-columns/less/column-resizer.less';
@import 'node_modules/angular-ui-grid/less/row-edit/less/rowEdit.less';
@import 'node_modules/angular-ui-grid/less/selection/less/selection.less';
@import 'node_modules/angular-ui-grid/less/tree-base/less/tree-base.less';
@import 'node_modules/angular-ui-grid/less/tree-view/less/tree-view.less';
@import 'node_modules/angular-ui-grid/less/validate/less/validate.less';

@font-face {
  font-family: 'ui-grid';
  src: url('../fonts/ui-grid.eot');
  src: url('../fonts/ui-grid.eot#iefix') format('embedded-opentype'), url('../fonts/ui-grid.woff') format('woff'), url('../fonts/ui-grid.ttf') format('truetype'), url('../fonts/ui-grid.svg?#ui-grid') format('svg');
  font-weight: normal;
  font-style: normal;
}

.ui-grid-tree-header-row {
font-weight: bold !important;
}

.ui-grid-icon-plus-squared:before {
content: '\c350';
}
/ '썐' /
.ui-grid-icon-minus-squared:before {
content: '\c351';
}
/ '썑' /
.ui-grid-icon-search:before {
content: '\c352';
}

# More icons...

I need to set the bootstrapDirectory variable to point to my bootstrap folder. Unfortunately, feature less files (like pagination.less) import ui-grid variables.less, setting the bootstrapDirectory variable to its default value again ("../../../node_modules/bootstrap") and that's not right for me. Files like pagination.less also import bootstrap without using the boostrapDirectory variable with this line:

@import (reference) "../../../less/bootstrap/bootstrap";

This bootstrap.less file imports the ui-grid variables.less file again.

The error I get from less compiler is:

FileError: '../../../node_modules/bootstrap/less/utilities.less' wasn't found. Tried - node_modules/node_modules/bootstrap/less/utilities.less,/Users/rbaras/Abarsys/git/zeus/zeusweb/src/main/node_modules/bootstrap/less/utilities.less,../../../node_modules/bootstrap/less/utilities.less in node_modules/angular-ui-grid/less/bootstrap/bootstrap.less on line 76, column 3:
75   // Utility classes
76   @import (reference) "@{bootstrapDirectory}/less/utilities.less";
77   //@import (reference) "@{bootstrapDirectory}/less/responsive-utilities.less";

As you can see, the bootsrapDirectory file is set to the default value instead to my overrided value.

Any ideas to solve this? Oddly, autoless (0.1.7) is able to build the css file, but the less compiler is not. The less and autoless commands I'm using to compile are:

lessc src/main/webapp/assets/stylesheets/main.less > /destination_folder/main.css --autoprefix='> 1%, last 2 versions' --source-map --source-map-less-inline --source-map-map-inline

autoless src/main/webapp/assets/stylesheets /destination_folder --autoprefix='> 1%, last 2 versions' --source-map

Thanks in advance!

@stale
Copy link

stale bot commented May 23, 2018

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the stale label May 23, 2018
@mportuga mportuga self-assigned this May 30, 2018
@stale stale bot removed the stale label May 30, 2018
@mportuga mportuga added this to Needs triage in Bug Triage Jun 26, 2018
@stale
Copy link

stale bot commented Jul 29, 2018

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the stale label Jul 29, 2018
@mportuga mportuga moved this from To do to In progress in UI-Grid 5.0.0 (Angular 5) Aug 4, 2018
@stale stale bot removed the stale label Aug 4, 2018
mportuga pushed a commit that referenced this issue Aug 4, 2018
The core.less file should serve to facilitate overwriting the variables in ui-grid.

fix #4659
mportuga pushed a commit that referenced this issue Aug 4, 2018
The core.less file should serve to facilitate overwriting the variables in ui-grid.

fix #4659
UI-Grid 5.0.0 (Angular 5) automation moved this from In progress to Done Aug 4, 2018
Bug Triage automation moved this from Needs triage to Closed Aug 4, 2018
mportuga pushed a commit that referenced this issue Aug 4, 2018
The core.less file should serve to facilitate overwriting the variables in ui-grid.

fix #4659
defields923 pushed a commit to defields923/ui-grid that referenced this issue Oct 30, 2018
The core.less file should serve to facilitate overwriting the variables in ui-grid.

fix angular-ui#4659
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Bug Triage
  
Closed
Development

Successfully merging a pull request may close this issue.

6 participants