• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

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

20.11.14 12:26 작성 조회수 156

3

안녕하세요.  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"
}
}

답변 2

·

답변을 작성해보세요.

3

소라연님의 프로필

소라연

질문자

2020.11.14

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

2

소라연님 안녕하세요.

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

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

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

감사합니다 :)