search

mkhairi / jquery-datatables

Jquery datatables ruby gems for assets pipeline
https://datatables.net/
Other
75 stars 18 forks source link

Problem compiling datatable assets #7

Closed sciguy closed 6 years ago

sciguy commented 7 years ago

I had a problem compiling datatable assets (version 1.10.15) using the latest version of sprockets (4.0.0.beta4). I fixed the issue locally by changing the extensions of the css files to scss.

JoeyLeadJig commented 7 years ago

To extend on this issue it is specifically related to use of image-url in /app/assets/stylesheets/datatables/dataTables.foundation.css and /app/assets/stylesheets/datatables/jquery.dataTables.css

sciguy commented 7 years ago

Yes. For me it was specifically jquery.dataTables.css. But any .css file with image-url could cause a problem.

joeyparis commented 7 years ago

I found a solution that did not require me to change any code within the gem. I renamed app/assets/stylesheets/datatables.css to app/assets/stylesheets/datatables.scss and replaced the sprockets require with the sass @import. This way I could import the CSS files from the gem, but process them through sass-rails to parse the image-url tag.

Basically I changed from this: app/assets/stylesheets/datatables.css

/*
*= require datatables/jquery.dataTables
*= require datatables/extensions/AutoFill/autoFill.bootstrap
*= require datatables/extensions/Buttons/buttons.bootstrap
*= require datatables/extensions/ColReorder/colReorder.bootstrap
*= require datatables/extensions/FixedColumns/fixedColumns.bootstrap
*= require datatables/extensions/FixedHeader/fixedHeader.bootstrap
*= require datatables/extensions/KeyTable/keyTable.bootstrap
*= require datatables/extensions/Responsive/responsive.bootstrap
*= require datatables/extensions/RowReorder/rowReorder.bootstrap
*= require datatables/extensions/Scroller/scroller.bootstrap
*= require datatables/extensions/Select/select.bootstrap
*/

to this: app/assets/stylesheets/datatables.scss

@import "datatables/jquery.dataTables";
@import "datatables/extensions/AutoFill/autoFill.bootstrap";
@import "datatables/extensions/Buttons/buttons.bootstrap";
@import "datatables/extensions/ColReorder/colReorder.bootstrap";
@import "datatables/extensions/FixedColumns/fixedColumns.bootstrap";
@import "datatables/extensions/FixedHeader/fixedHeader.bootstrap";
@import "datatables/extensions/KeyTable/keyTable.bootstrap";
@import "datatables/extensions/Responsive/responsive.bootstrap";
@import "datatables/extensions/RowReorder/rowReorder.bootstrap";
@import "datatables/extensions/Scroller/scroller.bootstrap";
@import `"datatables/extensions/Select/select.bootstrap";`

For better Google discovery. This causes an error during assets:precompile that says NoMethodError: undefined method '[]' for nil:NilClass. Although this is not the only potential cause of that error.

andy-twosticks commented 7 years ago

@joeyparis Errors out for me, I'm afraid, unless I add ".css" to each import.

Even then I'm seeing a lot of errors about .css files being missing, but they are in the browser console, not the server command line. It seems to work better, but not perfectly? Not sure what is going on...

mkhairi commented 7 years ago

thanks for reporting issue 👍. this issue will be be fix next release 🙇 . the best solution for current version, please covert to scss file as mentioned by @joeyparis above.