using `sass` to `@import` or `@use` css file in a classname with `cra 4`

Question

I am using sass: 1.4.x and with create-react-app 4..

all i am doing it import a css file in a custom class and my file is not getting imported..

.umaiShopDashBoardParent {
  @import '~react-dates/lib/css/_datepicker.css';
}

as attached in the screenshot i am getting 'unknown property name'...

However if i am using node-sass@latest and using the above class it worked fine..

is there something new in dart-sass that i am missing.. as i am not able to load this file unless i move it outside of the classname .umaiShopDashBoardParent and put in root

Moreover, i try to use @use to use a css file

i get the following error:

resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/styles/main.scss)
SassError: Cant find stylesheet to import.
  ╷
1 │ @use '~react-dates/lib/css/_datepicker.css';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles/vendor/_all.scss 1:1  @import
  src/styles/main.scss 2:11        root stylesheet

Does this answer your question? [Import css/scss file into a class](https://stackoverflow.com/questions/24307455/import-css-scss-file-into-a-class) — MattHamer5, Oct 15 '21 at 12:32
doing as above gives error: ``` (./node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/styles/main.scss) SassError: This function isn't allowed in plain CSS. ╷ 152 │ color: darken(#cacccd,10%); │ ^^^^^^^^^^^^^^^^^^^ ╵ node_modules/react-dates/lib/css/_datepicker.css 152:10 @import ``` — Murtaza Hussain, Oct 15 '21 at 12:39
however, when i swtich to `node-sass` it works.. not sure why `sass` is not picking it :( — Murtaza Hussain, Oct 15 '21 at 12:40
https://stackoverflow.com/questions/62494045/blueprintjs-sasserror-path-fill-5c7080-isnt-a-valid-css-value ---> this might be a similar question.. however i want to use sass and not node-sass — Murtaza Hussain, Oct 15 '21 at 12:43

score -1 · Answer 1 · answered Oct 18 '21 at 16:59

The issue was in react-dates css file react-dates/lib/css/_datepicker.css...

It is not compatible with sass , there a issue i created for it here:

https://github.com/airbnb/react-dates/issues/2152

Moreover, a/c to the link below the issue is fixed but not yet deployed to release at the time of writing this answer..

For more details check this link: https://github.com/airbnb/react-dates/issues/2081

using `sass` to `@import` or `@use` css file in a classname with `cra 4`

1 Answers1