nuxt – swiper.js 빌드 오류 생길때 > IT 기술백서

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]

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

위로 스크롤