CRA4环境下sass在类内@import/@use CSS文件报错如何解决？

问题1：嵌套@import CSS文件报unknown property name错误 #

• 根因：dart-sass（也就是你使用的sass@1.4.x包）的标准语法规定，纯CSS文件的@import规则默认只能写在根层级。如果写在选择器嵌套内部，sass不会把CSS文件内容解析后插入嵌套块，而是会把@import 'xxx.css'当成普通CSS属性直接输出，浏览器解析时识别不了该属性，就会抛出未知属性名错误。老版本的node-sass对非标准的嵌套导入CSS做了特殊兼容处理，所以可以正常运行，但该写法不符合sass官方规范。
• 解决方法：
  1. 如果需要让datepicker的样式全部作用在.umaiShopDashBoardParent类下，可以把react-dates/lib/css/_datepicker.css的文件内容复制到你的scss文件的嵌套块内，或者把该CSS文件重命名为.scss后缀再导入，sass就会正常解析内容并插入到嵌套块中。
  2. 如果不需要做命名空间隔离，直接把@import语句移到scss文件的根层级即可，这也是最推荐的写法。

问题2：@use导入文件报找不到样式表错误 #

• 根因：@use是dart-sass推出的新一代模块系统，路径解析由sass自身处理，不支持webpack体系下的~开头的node_modules别名，所以无法识别对应路径；同时低版本的sass-loader也不支持@use语法。
• 解决方法：
  1. 先修改引入路径，去掉路径开头的~，同时给项目的sass-loader增加includePaths配置，把node_modules目录加入sass的文件查找路径：
     如果是eject后的create-react-app项目，直接修改webpack配置中sass-loader的参数：

  {
    loader: 'sass-loader',
    options: {
      sassOptions: {
        includePaths: [path.resolve(__dirname, '../node_modules')]
      }
    }
  }
  

  如果没有eject，可以用customize-cra等工具修改配置。
  2. 确保你的sass-loader版本≥10.0.0，可对@use语法提供完整支持。
  3. 导入纯CSS文件时必须明确加.css后缀，否则sass会默认查找.scss/.sass后缀的文件，导致找不到目标文件。

内容的提问来源于stack exchange，提问作者Murtaza Hussain