Nuxt项目使用Swiperjs的Coverflow效果失效，如何导入对应样式？

方式1：单组件局部导入 #

仅在需要使用Coverflow效果的组件内导入，避免全局加载冗余样式：

• 若组件使用less语法，直接在style块中导入即可，若样式不生效可去掉scoped属性，或拆分出单独的无scoped样式块：

<!-- 单独无scoped的样式块专门导入第三方样式 -->
<style lang="less">
@import "swiper/components/effect-coverflow/effect-coverflow.less";
</style>

<!-- 私有样式保留scoped -->
<style scoped>
/* 你的组件自定义样式 */
</style>

方式2：全局注册样式 #

项目多页面/组件使用该效果时可选择全局导入，一次配置全项目可用：

• Nuxt3 配置（nuxt.config.ts）：

export default defineNuxtConfig({
  css: [
    // 可按需加入swiper基础样式和其他效果样式
    'swiper/components/effect-coverflow/effect-coverflow.less'
  ]
})

• Nuxt2 配置（nuxt.config.js）：

export default {
  css: [
    'swiper/components/effect-coverflow/effect-coverflow.less'
  ]
}

注意事项 #

• 导入less文件前请确保项目已安装less相关依赖，未安装可执行命令：npm install less less-loader -D
• 样式导入完成后仍需检查Swiper实例配置是否正确开启Coverflow效果，示例配置参考：

const swiperOptions = {
  effect: 'coverflow',
  coverflowEffect: {
    rotate: 50,
    stretch: 0,
    depth: 100,
    modifier: 1,
    slideShadows: true
  },
  // 其他swiper配置项
}

内容的提问来源于stack exchange，提问作者Developer Hub