Svelte.jsでSassをつかいたい
この記事は最終更新日から1年以上が経過しています。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2F1200px-Svelte_Logo.png?alt=media&token=2760e908-ccad-4b50-8027-6f2992ef78c2)
「Svelte.js」ですが、いざ作り出すとSassがいいとかBabelは? など色々必要なものが足りていないことに気づきました。
調べたところwebpackの設定をいじればOKです!みたいな記事が結構出てきたのですが、私の環境には「rollup.config.js」がセットされており。。sveltejs/templateに標準でセットされており。。webpackのweの字もありませんじゃないですか。 こうなりゃ自分で調べろです。
英語版のGoogleで「svelte scss」で検索しtopにこちら(https://daveceddia.com/svelte-with-sass-in-vscode/)のサイトがHitしました。
読み進めると「install the svelte-preprocess package.」とあるではありませんか。とういうわけで、Let's go npm ♪ (https://www.npmjs.com/package/svelte-preprocess)です。
svelte-preprocessはsvelteでPostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pugを使うのに必要なものだと解釈!おし!コマンド発車!
$ npm install --save-dev svelte-preprocess
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Fpicture_pc_22ebb59f1fe4de216a3db701ed948d16.png?alt=media&token=84a8c5a6-ecfd-41da-8068-9c37cb4c9fe9)
むむっなんか警告が!
と思いきや「postcssとかのパッケージは入れ忘れないでね」となんて優しい警告でしょうか。
検索した記事に戻り読み進めるとrollup.config.jsに下記を追加してねとありました。
// import追加
import autoPreprocess from 'svelte-preprocess';
// svelteにautoPreprocessを追加
export default {
/* ... */
plugins: [
svelte({
/* ... */
preprocess: autoPreprocess()
})
}),
/* ... */
}
設定完了!いざ出動!
$ npm run dev
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Fpicture_pc_f5c6b2f6287ddc276d72b34ff1cad6c7.png?alt=media&token=c8d0993f-9855-4e87-8cf2-91f0dd4259dc)
あっ!さっき警告で教えてくれたのに。。パッケージ入れてねエラーが発動してしまいました。失礼しました。
$ npm install --save-dev node-sass sass
この内容で npm run dev
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Fpicture_pc_24ad51c31d84d7a86b3460609f5dbe77.png?alt=media&token=198bfff2-6cfb-47a5-9935-4146c5c61831)
無事インストールできました。
Dave Ceddiaさん、ありがとうございました!!
ここまでお読みいただきありがとうございました