SvelteKitにSCSSまたはSASSを追加する方法

Svelte / SvelteKitは他のCSSプリプロセッサをサポートしていますが、何も組み込まれていないため、プロジェクトで使用するには、依存関係を手動でインストールする必要があります。このブログ投稿では、これを実現するための最も簡単な方法について説明します。

SvelteまたはSvelteKitを初めて使用する場合、SCSSまたはSASSを使用するための構文は単純であり、スタイルタグにlang="sass"属性を追加するだけです。

// SASS

<style lang="sass">
	.page {
		width: 100%;
		max-width: var(--column-width);
		margin: var(--column-margin-top) auto 0 auto;
	}
</style>

// SCSS

<style lang="scss">
	.page {
		width: 100%;
		max-width: var(--column-width);
		margin: var(--column-margin-top) auto 0 auto;
	}
</style>

ただし、新しいSvelteKitリポジトリでこれを実行しようとすると、次のエラーメッセージが表示されます。

sveltekit-error-no-sass

完全なエラーメッセージは次のとおりです。

Cannot find any of modules: sass,node-sass

Error: Cannot find module 'node-sass'
Require stack:
- /Users/hao/workspace/demo/node_modules/.pnpm/svelte-preprocess@4.10.5_svelte@3.46.6+typescript@4.6.3/node_modules/svelte-preprocess/dist/modules/utils.js
- /Users/hao/workspace/demo/node_modules/.pnpm/svelte-preprocess@4.10.5_svelte@3.46.6+typescript@4.6.3/node_modules/svelte-preprocess/dist/autoProcess.js
- /Users/hao/workspace/demo/node_modules/.pnpm/svelte-preprocess@4.10.5_svelte@3.46.6+typescript@4.6.3/node_modules/svelte-preprocess/dist/index.js

The file cannot be parsed because style requires a preprocessor that doesn't seem to be setup or failed during setup. Did you setup a `svelte.config.js`? If you use SCSS, it may be necessary to add the path to your NODE runtime to the setting `svelte.language-server.runtime`, or use `sass` instead of `node-sass`. 

See https://github.com/sveltejs/language-tools/tree/master/docs#using-with-preprocessors for more info.svelte(style)

解決

私たちがしなければならないのは、開発依存関係にsassを追加することだけです。そうすれば、SvelteKitが自動的にそれを取得します。

これを実現するために使用できるパッケージがいくつかあります。

node-sassは最も参照されているものですが、非推奨になっているため、これを使用しないことを強くお勧めします。
dart-sassは、のより現代的な実装ですnode-sass。しかし、その後、名前がに変更されましたsass。
sassはあなたが使うべきものです！

// NPM

npm i -D sass

// Yarn

yarn add -D sass

// PNPM

pnpm add -D sass

次に、上記のエラーメッセージが消えるはずです。

sasssveltekitエラーが修正されました

エラーメッセージが消えない場合は、エディタをリロードしてみてください。MacでVSCodeを使用している場合は、cmd + pを使用してこれを実行し、Developer：reloadwindowを検索できます。

注：これを有効にするには、SvelteKitアプリを再起動する必要がある場合もあります。

ソース：https ：//blog.hao.dev/how-to-add-scss-or-sass-to-sveltekit

#scss #sass #sveltekit

Buddha Community

SvelteKitにSCSSまたはSASSを追加する方法

SvelteまたはSvelteKitを初めて使用する場合、SCSSまたはSASSを使用するための構文は単純であり、スタイルタグにlang="sass"属性を追加するだけです。

// SASS <style lang="sass"> .page { width: 100%; max-width: var(--column-width); margin: var(--column-margin-top) auto 0 auto; } </style> // SCSS <style lang="scss"> .page { width: 100%; max-width: var(--column-width); margin: var(--column-margin-top) auto 0 auto; } </style>

ただし、新しいSvelteKitリポジトリでこれを実行しようとすると、次のエラーメッセージが表示されます。

完全なエラーメッセージは次のとおりです。

Cannot find any of modules: sass,node-sass Error: Cannot find module 'node-sass' Require stack: - /Users/hao/workspace/demo/node_modules/.pnpm/svelte-preprocess@4.10.5_svelte@3.46.6+typescript@4.6.3/node_modules/svelte-preprocess/dist/modules/utils.js - /Users/hao/workspace/demo/node_modules/.pnpm/svelte-preprocess@4.10.5_svelte@3.46.6+typescript@4.6.3/node_modules/svelte-preprocess/dist/autoProcess.js - /Users/hao/workspace/demo/node_modules/.pnpm/svelte-preprocess@4.10.5_svelte@3.46.6+typescript@4.6.3/node_modules/svelte-preprocess/dist/index.js The file cannot be parsed because style requires a preprocessor that doesn't seem to be setup or failed during setup. Did you setup a `svelte.config.js`? If you use SCSS, it may be necessary to add the path to your NODE runtime to the setting `svelte.language-server.runtime`, or use `sass` instead of `node-sass`. See https://github.com/sveltejs/language-tools/tree/master/docs#using-with-preprocessors for more info.svelte(style)

解決

私たちがしなければならないのは、開発依存関係にsassを追加することだけです。そうすれば、SvelteKitが自動的にそれを取得します。

これを実現するために使用できるパッケージがいくつかあります。

node-sassは最も参照されているものですが、非推奨になっているため、これを使用しないことを強くお勧めします。

dart-sassは、のより現代的な実装ですnode-sass。しかし、その後、名前がに変更されましたsass。

sassはあなたが使うべきものです！

// NPM npm i -D sass // Yarn yarn add -D sass // PNPM pnpm add -D sass

次に、上記のエラーメッセージが消えるはずです。

注：これを有効にするには、SvelteKitアプリを再起動する必要がある場合もあります。

SvelteKitにSCSSまたはSASSを追加する方法

解決

What is GEEK

Buddha Community

SvelteKitにSCSSまたはSASSを追加する方法

解決