Angular Material v14自定义主题生成CSS时样式表导入失败

直接使用sass命令构建时，无法识别Angular CLI的stylePreprocessorOptions配置，需要给sass命令本身指定依赖包的查找路径，以下是几种可行方案：

• 单次命令添加路径参数
  在执行sass命令时，通过--load-path参数将node_modules加入查找路径，这样Sass就能解析@angular/cdk这类包的导入：

  sass --load-path=node_modules theme.scss theme-custom-mat.css
  

  若需要多个路径，可多次添加--load-path，或根据系统用分隔符拼接：

  • 类Unix系统（Linux/macOS）：

    sass --load-path=node_modules --load-path=src/styles theme.scss theme-custom-mat.css
    

  • Windows系统：

    sass --load-path=node_modules;src/styles theme.scss theme-custom-mat.css
    

• 通过配置文件永久设置
  在项目根目录创建.sassrc配置文件，写入以下内容：

  {
    "loadPaths": ["node_modules"]
  }
  

  之后直接执行原命令即可，无需每次添加参数：

  sass theme.scss theme-custom-mat.css
  

补充说明 #

你之前尝试的stylePreprocessorOptions是Angular CLI专属的配置，仅在使用ng build或ng serve构建项目时生效，直接调用sass命令不会读取该配置，因此必须通过上述方式为sass命令本身指定依赖查找路径。

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