#StackBounty: #npm #webpack #sass #laravel-mix What's the correct approach for re-building a npm package within my own project?

Bounty: 50

Presentation:

I built an admin template (css + js) and I uploaded it to npm. The package contains the compiled css/js files in the “dist” folder, and the scss files in the “build” folder. The package has several dependencies which are listed as devDependencies in the package.json:

"devDependencies": {
  "datatables.net": "^1.10.19",
  "dropzone": "^5.5.1",
  "laravel-mix": "^4.0.13",
  ...
}

There are no dependencies, which I assume is correct because I directly use the compiled css/js (the js is just jQuery code).

There’s an admin.scss file which has all the imports:

@import 'abstracts/variables';

@import
  '~datatables.net-bs4/css/dataTables.bootstrap4.min.css',
  '~easymde/dist/easymde.min.css',
  '~flatpickr/dist/flatpickr.min.css',
  '~jasny-bootstrap/dist/css/jasny-bootstrap.min.css',
  '~selectizebootstrap/dist/css/selectize.bootstrap4.css';

@import
  'components/alerts',
  'components/cards';

I’m using the admin package in a PHP project (Laravel). The admin package is included in the devDependencies of my PHP project. The admin.css file is included in the php.scss file:

@import '../../node_modules/admin-template/dist/css/admin.css';

The problem:

I need to change some variables of the admin.scss file. So, instead of include the compiled css I need to include the scss:

@import '../../node_modules/admin-template/build/scss/admin';

If I do that, I get errors because the admin template devDependencies are not installed in my node_modules.

If do a npm install within the admin template folder, a node_modules folder is created and all the dependencies are installed inside that folder.
But the errors doens’t go away, I think is because of the tilde used in the imports of the scss file: @import '~datatables.net-bs4/css/dataTables.bootstrap4.min.css'. It’s looking for the files in the root folder (not within the package).

What should I do?

  • Add all the admin template devDependencies as devDependencies of my PHP project? Doesn’t seems right.
  • List the admin template devDependencies as dependencies, so when I install the package, all the dependencies get installed too? Doesn’t seems right either, those are devDependencies.
  • Remove the tilde ~ off all the @imports in the admin.scss file? So if I need to include directly the scss I need to do an npm install within the package. And if I already have some of that packages installed in my node_modules, they’ll be twice.
  • Any other options?


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.