vue-awesome-swiper 를 사용했을때 yarn build 하면 아래와 같은 오류가 생길 수 있다.
[code]
ERROR in ./node_modules/swiper/css/swiper.css
Module build failed (from ./node_modules/extract-css-chunks-webpack-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
ParserError: Syntax Error at line: 1, column 36
at /home/myhome/front/node_modules/swiper/css/swiper.css:147:3
at Parser.error (/home/myhome/front/node_modules/postcss-values-parser/lib/parser.js:127:11)
at Parser.operator (/home/myhome/front/node_modules/postcss-values-parser/lib/parser.js:162:20)
at Parser.parseTokens (/home/myhome/front/node_modules/postcss-values-parser/lib/parser.js:245:14)
at Parser.loop (/home/myhome/front/node_modules/postcss-values-parser/lib/parser.js:132:12)
at Parser.parse (/home/myhome/front/node_modules/postcss-values-parser/lib/parser.js:51:17)
at parse (/home/myhome/front/node_modules/postcss-custom-properties/index.cjs.js:47:30)
at /home/myhome/front/node_modules/postcss-custom-properties/index.cjs.js:333:24
at /home/myhome/front/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:72:18
at /home/myhome/front/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:55:18
at Rule.each (/home/myhome/front/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:41:16)
at Rule.walk (/home/myhome/front/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:52:17)
at /home/myhome/front/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:60:24
at Root.each (/home/myhome/front/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:41:16)
at Root.walk (/home/myhome/front/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:52:17)
at Root.walkDecls (/home/myhome/front/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:70:19)
at transformProperties (/home/myhome/front/node_modules/postcss-custom-properties/index.cjs.js:330:8)
at /home/myhome/front/node_modules/webpack/lib/NormalModule.js:316:20
at /home/myhome/front/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /home/myhome/front/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/home/myhome/front/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.loader (/home/myhome/front/node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/index.js:104:7)
@ ./pages/auctions/_id/index/index.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref–2-0!./node_modules/babel-loader/lib??ref–2-1!./node_modules/vue-loader/lib??vue-loader-options!./pages/auctions/_id/index/index.vue?vue&type=script&lang=js&) 32:0-31
@ ./pages/auctions/_id/index/index.vue?vue&type=script&lang=js&
@ ./pages/auctions/_id/index/index.vue
@ ./.nuxt/router.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi ./.nuxt/client.js
[/code]
postcss 버전 문제 때문인듯 하다. swiper.css 를 수정해 준다.
# vim node_modules/swiper/css/swiper.css
147번째 줄 쯤에서
[code]
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: calc(var(–swiper-navigation-size) / 44 * 27);
height: var(–swiper-navigation-size);
margin-top: calc(-1 * var(–swiper-navigation-size) / 2);
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(–swiper-navigation-color, var(–swiper-theme-color));
}
[/code]
위 코드를 아래 내용으로 대체하자
[code]
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
/* width: calc(var(–swiper-navigation-size) / 44 * 27); */
–step1: calc(var(–swiper-navigation-size) / 44);
width: calc(var(–step1) * 27);
/**************/
height: var(–swiper-navigation-size);
/* margin-top: calc(-1 * var(–swiper-navigation-size) / 2); */
–step2: calc(-1 * var(–swiper-navigation-size));
margin-top: calc(var(–step2) / 2);
/**************/
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(–swiper-navigation-color, var(–swiper-theme-color));
}
[/code]
