在类名中使用 `sass` 到 `@import` 或 `@use` css 文件和 `cra 4`答案

【问题标题】：using `sass` to `@import` or `@use` css file in a classname with `cra 4`在类名中使用 `sass` 到 `@import` 或 `@use` css 文件和 `cra 4`
【发布时间】：2021-12-03 15:51:34
【问题描述】：

我正在使用 sass: 1.4.x 和 create-react-app 4..

我所做的一切都是在自定义类中导入一个 css 文件，但我的文件没有被导入..

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

如截图所示，我收到了'unknown property name'...

但是，如果我使用 node-sass@latest 并使用上面的类，它工作正常..

我在 dart-sass 中是否有一些新的东西我错过了......因为我无法加载这个文件，除非我将它移到类名 .umaiShopDashBoardParent 之外并放入根目录

此外，我尝试使用@use 来使用css文件

我收到以下错误：

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

【问题讨论】：

这能回答你的问题吗？ Import css/scss file into a class
如上操作会报错：``` (./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: 这个函数在纯 CSS 中是不允许的。 ╷ 152 │ 颜色：变暗(#cacccd,10%); │ ^^^^^^^^^^^^^^^^^^^ ╵ node_modules/react-dates/lib/css/_datepicker.css 152:10 @import ``
但是，当我切换到node-sass 时，它可以工作.. 不知道为什么sass 没有选择它:(
stackoverflow.com/questions/62494045/… ---> 这可能是一个类似的问题.. 但是我想使用 sass 而不是 node-sass

标签： css sass styles node-sass

【解决方案1】：

问题出在 react-dates css 文件 react-dates/lib/css/_datepicker.css...

它与sass 不兼容，我在这里为它创建了一个问题：

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

此外，问题下方链接的 a/c 已修复，但在撰写此答案时尚未部署发布..

有关更多详细信息，请查看此链接： https://github.com/airbnb/react-dates/issues/2081

【讨论】：