Help us understand the problem. What is going on with this article?

Svelte に TypeScript と Sass を導入する

TL;DR

Svelteとは?Reactの比較 / TypeScriptと Sassの導入方法 を参考にやってみたら出来なかったので自分用メモ

公式ドキュメントにしたがってテンプレートを取得

Svelte for new developers の記述通りにすすめます。ここまでは問題ないかと。

bash
$ npx degit sveltejs/template my-svelte-project
$ cd my-svelte-project/
$ npm install
$ npm run dev

ブラウザで http://localhost:5000 にアクセスすれば以下のようにホットリロードされます。

スクリーンショット 2020-06-29 16.24.47.png

Svelte for VS Code のインストール

TypeScript の導入

TypeScript本体のインストールと設定

bash
$ npm i -D typescript
tsconfig.json
{
  "compilerOptions": {
    // Svelte では ES6 以降のシンタックスしかサポートされない
    "target": "ES2015",
    "module": "ES2015",
    "lib": ["DOM", "ES2015"],
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    // 型定義ファイルの置き場所を明示
    "baseUrl": ".",
    "paths": {
      "*": ["@types/*"]
    }
  }
}

*.svelte ファイルをインポートするための型定義ファイルを作成

@types/svelte.d.ts
declare module '*.svelte';

App.sveltemain.ts の編集

bash
$ mv src/main.js src/main.ts
src/App.svelte
- <script>
-   export let name;
+ <script lang="typescript">
+   export let name: string;
 </script>

プリプロセッサのインストールと設定

このままでは nameUnexpected token になってしまうのでプリプロセッサをインストールして rollup の設定を変更します。

bash
$ npm i -D svelte-preprocess
rollup.config.js
+ import { typescript } from 'svelte-preprocess';

const production = !process.env.ROLLUP_WATCH;

export default {
- input: 'src/main.js',
+ input: 'src/main.ts',
    output: {
rollup.config.js
    plugins: [
      svelte({
+      preprocess: [typescript({ tsconfigFile: './tsconfig.json' })],
       // enable run-time checks when not in production
       dev: !production,
       // we'll extract any component CSS out into

実行!

bash
$ npm run dev

Sass の導入

sass のインストール

bash
$ npm i -D sass

プリプロセッサ(rollup.config.js)の設定

rollup.config.js
- import { typescript } from 'svelte-preprocess';
+ import { typescript, scss } from 'svelte-preprocess';
rollup.config.js
    svelte({
-     preprocess: [typescript({ tsconfigFile: './tsconfig.json' })],
+     preprocess: [
+       typescript({ tsconfigFile: './tsconfig.json' }),
+       scss()
+     ],
      // enable run-time checks when not in production

App.svelte の編集

src/App.svelte
<style lang="scss">
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;

    h1 {
      color: #ff3e00;
      text-transform: uppercase;
      font-size: 4em;
      font-weight: 100;
    }
  }

  @media (min-width: 640px) {
    main {
      max-width: none;
    }
  }
</style>

実行!

bash
$ npm run dev
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした