vue导入外部CSS样式的两种方法

在Vue.js中，关于子组件的CSS样式应该放置的位置取决于设计原则和代码组织。以下是两种常见的做法： 1. **内联样式**：如果只需要针对特定子组件的一组简单样式，并且不需要复用，可以在子组件的`<style>`标签内直接编写，这样可以避免全局污染。例如： ```html <template> <div class="child-component"> <!-- 子组件内容 --> </div> </template> <script> export default { // ... } </script> <style scoped> .child-component { color: red; } </style> ``` 2. **外部CSS文件或局部CSS模块**：如果需要复用或者子组件样式需要管理得更好，通常建议将它们放在单独的`.vue`组件的`scoped`（仅作用于当前组件）或者`<style lang="scss"/>(如使用Sass)外部CSS文件中。这样做的好处在于提高代码的可维护性和团队协作，同时也可以利用CSS预处理器的功能。在父组件中导入并应用到子组件上： ```html <!-- 父组件.vue 文件 --> <template> <ChildComponent :styles="customStyles" /> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { customStyles: { '.child-class': { color: 'blue' } } }; } }; </script> ``` ```css // 子组件的<style>标签移除，样式单独放到子组件对应的<style lang="scss">部分，或者外部CSS文件里 /* 或者外部CSS文件 child-component.scss */ .child-class { /* ... */ } ```