学习 VUE 笔记 05 – 组件中使用 sass 和 swiper

cd 到项目根目录
npm install sass-loader node-sass style-loader sass-resources-loader --save-dev

打开组件文件 banner.vue


torem(420px)是个人习惯,将 px 转成 rem。
为了方便,不用在每一个组件中都写 @function 那个函数,可以将这个函数单独提出来,放到一个 base.scss 文件中,然后需要的地方用 @import "base.scss的路径"; 来引入该文件。例如:


关于 swiper 在 vue 中的使用,引入文件要在 index.html 中进行,相关的 js 也要写在 index.html 中或者另外开个文件,如下


其中observer: true,observeParents: true,是关键,否则会出现无法滑动的情况。具体看 swiper 官网示例

发表评论

电子邮件地址不会被公开。 必填项已用*标注