vue 组件单独引入 css 注意事项

vue 组件单独引入 css 注意事项

起因

想要在不同组件引入不同的引入不同的css，这样后面维护起来会容易一些

目录结构

报错

原本以为用这样就能引入了

<style>
  @import '@/assets/css/public.css';
</style>

但发现是报错

网上答复

百度了下网上的回答是这样的

<style scoped>
　　@import  '../../assets/css/public.css'; 
</style>

但我这边还是报错

还有是通过npm引入scss之类的方法，试过了后都是报错

最后的结果

最后用这种方法居然成功了

<style scoped>
　　@import  './../assets/css/publiccss'; 
</style>

温馨提示

1. 如果你以上方法都失败了，那你就只能妥协了，把所有css引入放入main.js里面引入
2. 在组件引入css时加了scoped就只能对这个组件有效果，如果组件里面有加了组件那也是没作用的