d3lm / ngx-drag-to-select

A lightweight, fast, configurable and reactive drag-to-select component for Angular 10 and beyond
https://www.npmjs.com/package/ngx-drag-to-select
MIT License
293 stars 64 forks source link

Angular 13 doesn't work with version 5 #147

Closed Ghostbird closed 2 years ago

Ghostbird commented 2 years ago

I'm not sure why it goes wrong. I get this error:

./src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].rules[1].use[1]!./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
7 │ @import '~ngx-drag-to-select/scss/ngx-drag-to-select';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles.scss 7:9  root stylesheet

./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
7 │ @import '~ngx-drag-to-select/scss/ngx-drag-to-select';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles.scss 7:9  root stylesheet

If I switch back to ngx-drag-to-select 4.2.0 it works again.

My app is using Angular 13.0.3 and Angular Material 13.1.0

d3lm commented 2 years ago

Hey there! Do you have a repro link? I have tested this with an Angular v13 project and for me it worked fine.

Try to change the styles import to

- @import '~ngx-drag-to-select/scss/ngx-drag-to-select';
+ @import 'ngx-drag-to-select/scss/ngx-drag-to-select';

Does that work?

Ghostbird commented 2 years ago

No, sorry, that doesn't work.

To reproduce I just did this:

cd /tmp
ng new testApp --style=scss --routing
cd testApp
echo "@import '~ngx-drag-to-select/scss/ngx-drag-to-select';" >> src/styles.scss
npm install ngx-drag-to-select@latest
ng serve

The result is here: https://github.com/Ghostbird/testApp

d3lm commented 2 years ago

Ok, I have fixed this issue and if you install 5.0.1 which is now on npm then you can just import the styles as

// src/styles.scss
@import "ngx-drag-to-select";

I have also updated the README.

Let me know if it works for you.

Ghostbird commented 2 years ago

Thank you so much for the quick fix! This works perfectly.