Ionic - 如何从node_modules导入scss或css文件？

Question

我想在我的组件中导入此css或scss文件：

node_modules/plyr/dist/plyr.css
node_modules/plyr/src/sass/plyr.scss

无论我尝试什么都行不通。

这是我已经尝试过的：

    @Component({
    selector: 'videoPlayer',
    template: ``,
    styleUrls: [
       //see below what I have tried to put here.
    ]
})

• "../../../node_modules/plyr/dist/plyr.css"

  

未处理的承诺拒绝：无法加载../../../node_modules/plyr/dist/plyr.css;区域：;任务：Promise.then;值：无法加载../../../ node_modules / plyr / dist / plyr.css

• "../../../node_modules/plyr/dist/plyr.css"

  

未处理的承诺拒绝：无法加载../../../node_modules/plyr/src/sass/plyr.scss;区域：;任务：Promise.then;值：无法加载../../../node_modules/plyr/src/sass/plyr.scss

• 我在没有../../../的情况下尝试了这两个网址，并且没有加载或提供错误。
• 我尝试了两个没有node_modules的网址，但是从~plyr/开始。给出与上面相同的错误。
• 我的component.scss文件我尝试了@import "~plyr/dist/plyr.css";

  

拒绝申请来自＆＃39; http://localhost:8100/build/~plyr/dist/plyr.css＆＃39;因为它的MIME类型（＆＃39; text / html＆＃39;）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。

• 如果没有扩展名，则会发现错误，找不到文件或无法访问该文件。

• @import "~plyr/src/sass/plyr.scss";也会导致文件找不到或无法访问错误。

• 没有扩展名也会出现同样的错误。

任何人都可以帮助我吗？ 我真的不知道如何解决这个问题。

顺便说一下，我对这样的答案并不感兴趣：

• 复制并将其放在资产文件夹中。
• 使用链接标记在index.HTML中定义它。
• 任何全局导入它的东西，我只希望它在特定的组件中。

Answer 1

不要使用组件装饰器中的styleUrls属性，从组件的scss文件中导入scss：

your-component {
    @import '../../../node_modules/plyr/src/sass/plyr';
}

它将被编译成CSS，并且会像你在组件的scss文件中手动添加的任何scss一样加前缀。