[질문] snowpack프로젝트 이관 후 sortable_ghos... - 인프런

Svelte.js [Core API] 완벽 가이드

[질문] snowpack프로젝트 이관 후 sortable_ghost css 문의드립니다.

해결된 질문

작성

216

안녕하세요. snowpack프로젝트로 이관하는 수업까지 잘 마쳤습니다.

이관 후 다른 기능은 정상적으로 동작하는데 sortable_chosen, sortable_ghost 의 CSS가 정상적으로 표현되지 않아서요.

(rollup으로 번들하면 정상 표현됩니다)

원인을 알 수 있을까요? 검토 부탁드립니다. 감사합니다.

데모사이트 : https://thirsty-knuth-947211.netlify.app/

snowpack.config.js

const production = process.env.NODE_ENV === 'production'
function babelOptions() {
  return {
    plugins: production
      ? ['transform-remove-console']
      : []
  }
}
module.exports = {
  mount: {
    src: '/_dist_',
    public: '/'
  },
  plugins: [
    ['@snowpack/plugin-svelte', {
      preprocess: require('svelte-preprocess')({
        scss: {
          prependData: '@import "./src/scss/main.scss";'
        },
        postcss: {
          plugins: [
            // Check package.json browserslist
            require('autoprefixer')()
          ]
        },
        babel: babelOptions()
      })
    }],
    ['@snowpack/plugin-babel', {
      transformOptions: babelOptions()
    }],
    '@snowpack/plugin-dotenv',
    '@snowpack/plugin-sass',
    '@snowpack/plugin-optimize'
  ],
  alias: {
    '~': './src'
  }
};

package.json

{
  "name": "svelte-trello-snowpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "snowpack dev",
    "build":"snowpack build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "devDependencies": {
    "@snowpack/plugin-babel": "^2.1.4",
    "@snowpack/plugin-dotenv": "^2.0.4",
    "@snowpack/plugin-optimize": "^0.2.9",
    "@snowpack/plugin-sass": "^1.1.1",
    "@snowpack/plugin-svelte": "^3.3.0",
    "autoprefixer": "^10.0.2",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "lodash": "^4.17.20",
    "postcss": "^8.1.7",
    "snowpack": "^2.17.1",
    "sortablejs": "^1.12.0",
    "svelte": "^3.29.7",
    "uuid": "^8.3.1"
  }
}

Rollup svelte Sortable

답변 2

소라연

질문자

정말 감사합니다. 알려주신 방법으로 해결하였습니다.

HEROPY

지식공유자

소라연님 안녕하세요.

질문하신 내용은 소라연님의 코드가 아닌 예제 자체의 문제로 확인했습니다!

해결하려고 많이 고생하셨을 텐데 예제를 완벽히 확인하지 못해 죄송합니다..

SCSS 중첩 문법에서 :global() 수식어를 사용했을 때 컴파일이 정상적으로 이뤄지지 않는 문제로 파악했고,

작성한 코드 수정 없이 해결할 수 있는 방법을 찾아보고 있는데,

아직은 연결한 Snowpack 플러그인 내부 사용 모듈의 버그 가능성을 가장 크게 보고 있습니다.

더 확인해보고 다른 해결책이 있으면 또 답변 남기겠습니다.

현재로선 가장 쉽게 해결할 방법으로 :global() 수식어를 SCSS 중첩에서 밖으로 빼내는 것입니다.

대표적으로 ListTitle.svelte 파일의 다음 내용과 같이 중첩 영역 없이(style 태그 최상위 범위에서) 작성하는 방법입니다.

참고로 ListTitle.svelte는 수정하지 않으셔도 됩니다.

:global(.list__inner:hover .edit-btn-for-list) {
  display: block !important;
}

그래서 첫 번째로 List.svelte 파일의 스타일 부분을 다음과 같이 수정하시고,

<style lang="scss">
  .list {
    // 아래 내용에 해당하는 부분은 삭제하세요!
    // 기타 코드 생략...
  }

  :global(.list.sortable-ghost) {
    opacity: 0.2;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #000;
      border-radius: 4px;
    }
  }
  :global(.list.sortable-chosen) {
    cursor: move;
  }
</style>

두 번째로 Card.svelte 파일의 스타일 부분도 다음과 같이 수정하세요.

<style lang="scss">
  .card {
    // 아래 내용에 해당하는 부분은 삭제하세요!
    // 기타 코드 생략...
  }
  .title {
    // 기타 코드 생략...
  }

  :global(.card.sortable-ghost) {
    opacity: 0.1;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #000;
      border-radius: 4px;
    }
  }
  :global(.card.sortable-chosen) {
    cursor: move;
  }
</style>

혹시라도 위 방법이 이해되지 않으시거나,

문제가 해결되지 않으면 다시 질문 남겨주세요!

완성본은 위 내용으로 다시 수정해 업로드하겠습니다.

https://github.com/HeropCode/Svelte-Trello-app-Snowpack

감사합니다 :)

인프런 커뮤니티 질문&답변

[질문] snowpack프로젝트 이관 후 sortable_ghost css 문의드립니다.