Ionic技术求助：如何从node_modules导入SCSS/CSS？导入Plyr样式失败

你遇到的这个Angular组件里加载Plyr CSS/SCSS失败的问题很常见，主要是路径配置或者Angular的样式解析规则导致的，我给你几个靠谱的解决思路：

1. 用Angular内置的node_modules路径引用（最省心） #

Angular支持直接通过~符号快速指向node_modules里的依赖文件，不用纠结相对路径的层级问题。直接修改组件的styleUrls配置：

@Component({
  selector: 'videoPlayer',
  template: ``,
  styleUrls: [
    '~plyr/dist/plyr.css'
    // 要是想用SCSS源文件，就改成 '~plyr/src/sass/plyr.scss'
  ]
})

注意：如果你的Angular版本在10及以上，~可能已经不需要了，直接写'plyr/dist/plyr.css'也能正常解析，可以两种写法都试试。

2. 全局导入样式（适合全应用使用Plyr的场景） #

如果这个视频播放器组件是全应用通用的，没必要在单个组件里单独加载样式，直接在全局样式文件里导入就行：
打开src/styles.scss（如果用的是CSS就打开styles.css），添加一行：

// 导入编译好的CSS
@import 'plyr/dist/plyr.css';

// 或者导入SCSS源码，方便自定义样式
@import 'plyr/src/sass/plyr.scss';

这样整个应用都能使用Plyr的样式，也不会出现路径问题。

3. 核对相对路径的层级（不推荐，但应急可用） #

如果你非要用相对路径，得仔细数清楚组件文件到node_modules的层级。比如你的组件文件在src/app/components/video-player/video-player.component.ts，那么相对路径应该是../../../../node_modules/plyr/dist/plyr.css——从当前文件夹往上走4层才能到项目根目录，再进入node_modules。不过这种方式很容易因为文件移动而失效，所以不推荐。

4. 确认Plyr依赖安装完整 #

有时候文件找不到是因为依赖没装全，你可以先检查node_modules里有没有plyr文件夹，或者重新安装一次：

npm install plyr --save

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