Angular全局样式导入失败：Kendo UI主题@import路径报错求助

你遇到的核心问题其实很明确：一是在纯.css文件里使用了SCSS专属的导入语法，二是~这个路径别名只有sass-loader能识别，普通css-loader没法解析它指向node_modules目录。下面给你几个不用手动在配置文件里逐个添加SCSS文件的解决方案：

1. 把styles.css重命名为styles.scss（最推荐） #

Angular CLI天生支持SCSS作为全局样式文件，只需要两步就能搞定：

• 直接将src/styles.css改名为src/styles.scss
• 打开angular.json（Angular 6+版本）或者.angular-cli.json（旧版本），找到styles数组，把原来的styles.css替换成styles.scss：

  "styles": [
    "src/styles.scss"
  ]
  

之后在styles.scss里正常写SCSS导入即可：

@import "~@progress/kendo-theme-default/scss/all";

这时sass-loader会自动识别~前缀，直接去node_modules里找对应的Kendo主题文件，不会再错误地到src目录下查找了。

2. 不重命名文件，配置CLI把styles.css当作SCSS处理 #

如果你不想修改文件名，可以通过配置让Angular CLI把.css文件用sass-loader编译：

• 打开angular.json，找到build配置下的options，添加stylePreprocessorOptions配置，同时可以调整默认组件样式格式：

"build": {
  "options": {
    // 其他原有配置
    "stylePreprocessorOptions": {
      "includePaths": [
        "node_modules"
      ]
    }
  },
  "schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  }
}

然后在styles.css里可以去掉~前缀，直接写导入：

@import "@progress/kendo-theme-default/scss/all";

不过这种方式不太推荐，毕竟文件后缀是css但实际写SCSS语法，容易给后续维护造成混淆。

3. 确认依赖是否正确安装 #

最后别忘了检查你是否已经安装了Kendo主题的SCSS依赖，在项目根目录执行：

npm install @progress/kendo-theme-default --save

如果之前漏装了这个依赖，安装后再尝试导入，也能解决找不到文件的问题。

总结一下：~是Webpack中sass-loader的特殊前缀，专门用来指向node_modules目录，只有处理SCSS/SASS文件时才会生效，所以在纯CSS文件里用这个语法肯定会报错，这也是为什么推荐用SCSS文件来写全局样式导入的核心原因。

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