Cộng đồng Hỏi & Đáp của Inflearn
câu hỏi đã được viết
[질문] snowpack프로젝트 이관 후 sortable_ghost css 문의드립니다.
Đã giải quyết
Viết
·
287
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"
}
}Câu trả lời 2
3
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
감사합니다 :)