Language-tools: `sass`κ°€ μ„€μΉ˜λ˜μ—ˆμ§€λ§Œ "λͺ¨λ“ˆμ„ 찾을 수 μ—†μŒ : sass, node-sass"

에 λ§Œλ“  2020λ…„ 10μ›” 19일  Β·  4μ½”λ©˜νŠΈ  Β·  좜처: sveltejs/language-tools

버그 μ„€λͺ…
λͺ¨λ“  단일 .svelte νŒŒμΌμ—μ„œ ν™•μž₯μžκ°€μ΄ 였λ₯˜λ₯Ό λ°œμƒμ‹œν‚΅λ‹ˆλ‹€ (좜λ ₯ νƒ­μ—μ„œ 볡사 됨).

Using Svelte v3.29.0 from /Users/nick/PROJECT_ROOT_REDACTED/node_modules/svelte/compiler
Preprocessing failed
Error: Cannot find any of modules: sass,node-sass

Error: Cannot find module 'node-sass'
Require stack:
- /Users/nick/.vscode/extensions/svelte.svelte-vscode-102.2.0/node_modules/svelte-preprocess/dist/modules/utils.js
- /Users/nick/.vscode/extensions/svelte.svelte-vscode-102.2.0/node_modules/svelte-preprocess/dist/autoProcess.js
- /Users/nick/.vscode/extensions/svelte.svelte-vscode-102.2.0/node_modules/svelte-preprocess/dist/index.js
- /Users/nick/.vscode/extensions/svelte.svelte-vscode-102.2.0/node_modules/svelte-language-server/dist/src/importPackage.js
- /Users/nick/.vscode/extensions/svelte.svelte-vscode-102.2.0/node_modules/svelte-language-server/dist/src/lib/documents/configLoader.js
- /Users/nick/.vscode/extensions/svelte.svelte-vscode-102.2.0/node_modules/svelte-language-server/dist/src/lib/documents/Document.js
- /Users/nick/.vscode/extensions/svelte.svelte-vscode-102.2.0/node_modules/svelte-language-server/dist/src/lib/documents/index.js
- /Users/nick/.vscode/extensions/svelte.svelte-vscode-102.2.0/node_modules/svelte-language-server/dist/src/server.js
- /Users/nick/.vscode/extensions/svelte.svelte-vscode-102.2.0/node_modules/svelte-language-server/bin/server.js
    at Object.importAny (/Users/nick/.vscode/extensions/svelte.svelte-vscode-102.2.0/node_modules/svelte-preprocess/dist/modules/utils.js:30:15)
    at async transformer (/Users/nick/.vscode/extensions/svelte.svelte-vscode-102.2.0/node_modules/svelte-preprocess/dist/transformers/scss.js:18:21)
    at async /Users/nick/.vscode/extensions/svelte.svelte-vscode-102.2.0/node_modules/svelte-preprocess/dist/autoProcess.js:96:29
    at async Object.style (/Users/nick/.vscode/extensions/svelte.svelte-vscode-102.2.0/node_modules/svelte-preprocess/dist/autoProcess.js:142:33)
    at async wrappedPreprocessor.style (/Users/nick/.vscode/extensions/svelte.svelte-vscode-102.2.0/node_modules/svelte-language-server/dist/src/plugins/svelte/SvelteDocument.js:208:33)
    at async /Users/nick/PROJECT_ROOT_REDACTED/node_modules/svelte/compiler.js:27431:32
    at async Promise.all (index 0)
    at async replace_async (/Users/nick/PROJECT_ROOT_REDACTED/node_modules/svelte/compiler.js:27386:52)
    at async Object.preprocess (/Users/nick/PROJECT_ROOT_REDACTED/node_modules/svelte/compiler.js:27427:19)
    at async transpile (/Users/nick/.vscode/extensions/svelte.svelte-vscode-102.2.0/node_modules/svelte-language-server/dist/src/plugins/svelte/SvelteDocument.js:223:25) {
  __source: 'Style'
}

svelte-preprocess μ„€μΉ˜ν–ˆμœΌλ©° ν•΄λ‹Ή 섀정은 λ‹€μŒκ³Ό 같은 svelte.config.js .

// svelte.config.js
const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  preprocess: sveltePreprocess({
    postcss: {
      plugins: [
        require('autoprefixer')
      ]
    },
    sass: {
      sync: true,
      implementation: require('sass'),
    },
  }),
};

implementation 제거λ₯Ό μ‹œλ„ν–ˆμ§€λ§Œ μž‘λ™ν•˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€. sass: true μ„€μ •ν•  λ•Œλ„ μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. νŠΉλ³„νžˆ Dart κ΅¬ν˜„μ΄ ν•„μš”ν•˜κΈ° λ•Œλ¬Έμ— node-sass μ‚¬μš©ν•˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€.

scss μ½”λ“œκ°€μ—†λŠ” κ³³μ—μ„œλ„ 였λ₯˜κ°€ λ‚˜νƒ€λ‚©λ‹ˆλ‹€ (슀크린 μƒ· μ°Έμ‘°).

μž¬ν˜„ν•˜λ €λ©΄
λ™μž‘μ„ μž¬ν˜„ν•˜λŠ” 단계 :

  1. svelte-preprocess 및 sass
  2. sass.implementation λ₯Ό`require ( 'sass')둜 μ„€μ •ν•˜μ—¬ svelte.config.jsλ₯Ό κ΅¬μ„±ν•©λ‹ˆλ‹€.
  3. .svelte νŒŒμΌμ„ μ—½λ‹ˆ λ‹€.

μ˜ˆμƒλ˜λŠ” 행동

  1. ν™•μž₯은 였λ₯˜λ₯Ό λ˜μ§€μ§€ μ•ŠμŠ΅λ‹ˆλ‹€

슀크린 μƒ·
grafik

μ‹œμŠ€ν…œ (λ‹€μŒ 정보λ₯Ό μž‘μ„±ν•˜μ‹­μ‹œμ˜€) :

  • 운영체제 : macOS Catalina 10.15.7
  • IDE : VSCode 1.50.1
  • ν”ŒλŸ¬κ·ΈμΈ / νŒ¨ν‚€μ§€ : "Svelte for VSCode"

μΆ”κ°€ μ»¨ν…μŠ€νŠΈ
μ €λŠ” Svelte뿐만 μ•„λ‹ˆλΌ Sapper 앱을 κ°œλ°œν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

question

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

μ’‹μ•„, λ‚˜λŠ” 맀우 바보 κ°™λ‹€ πŸ˜…

전에 ν™•μΈν–ˆμ§€λ§Œ μ—¬μ „νžˆ μ„€μΉ˜λœ James Birtles의 이전 ν™•μž₯ κΈ°λŠ₯을 λ†“μ³€μŠ΅λ‹ˆλ‹€. 이전 ν™•μž₯을 μ œκ±°ν•˜κ³  VSCodeλ₯Ό λ‹€μ‹œλ‘œλ“œν•˜λ©΄ λ©”μ‹œμ§€κ°€ μ‚¬λΌμ‘ŒμŠ΅λ‹ˆλ‹€.

λͺ¨λ“  4 λŒ“κΈ€

μ’‹μ•„, λ‚˜λŠ” 맀우 바보 κ°™λ‹€ πŸ˜…

전에 ν™•μΈν–ˆμ§€λ§Œ μ—¬μ „νžˆ μ„€μΉ˜λœ James Birtles의 이전 ν™•μž₯ κΈ°λŠ₯을 λ†“μ³€μŠ΅λ‹ˆλ‹€. 이전 ν™•μž₯을 μ œκ±°ν•˜κ³  VSCodeλ₯Ό λ‹€μ‹œλ‘œλ“œν•˜λ©΄ λ©”μ‹œμ§€κ°€ μ‚¬λΌμ‘ŒμŠ΅λ‹ˆλ‹€.

μœ„μ—μ„œ μ–ΈκΈ‰ ν•œ ν™•μž₯은 Svelte for VS Code μž…λ‹ˆλ‹€.

μ’‹μ•„, λ‚˜λŠ” 맀우 바보 κ°™λ‹€ πŸ˜…

전에 ν™•μΈν–ˆμ§€λ§Œ μ—¬μ „νžˆ μ„€μΉ˜λœ James Birtles의 이전 ν™•μž₯ κΈ°λŠ₯을 λ†“μ³€μŠ΅λ‹ˆλ‹€. 이전 ν™•μž₯을 μ œκ±°ν•˜κ³  VSCodeλ₯Ό λ‹€μ‹œλ‘œλ“œν•˜λ©΄ λ©”μ‹œμ§€κ°€ μ‚¬λΌμ‘ŒμŠ΅λ‹ˆλ‹€.

κ·Έ λŒ€μ‹  μ‚¬μš©ν•  ν™•μž₯ ν”„λ‘œκ·Έλž¨μ€ λ¬΄μ—‡μž…λ‹ˆκΉŒ?

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰