Svelte + Sapper + TypeScript + TailwindCSS + Svelte Material UI

Svelte Material UIを追加

前回のTailwindCSS対応にSvelte Material UIを追加する。

ここまでの作業

www.axon.jp

Svelte Material UIと関連パッケージを追加

$ yarn add -D svelte-material-ui rollup-plugin-postcss node-sass

テーマ用の空のscssを作成

$ mkdir src/theme && touch src/theme/_smui-theme.scss

typesにsmuiを追加

typings/@smui/index.d.ts

declare module "@smui/button";
declare module "@smui/card";
declare module "@smui/checkbox";
declare module "@smui/chips";
declare module "@smui/common";
declare module "@smui/data-table";
declare module "@smui/dialog";
declare module "@smui/drawer";
declare module "@smui/fab";
declare module "@smui/floating-label";
declare module "@smui/form-field";
declare module "@smui/icon-button";
declare module "@smui/image-list";
declare module "@smui/line-ripple";
declare module "@smui/linear-progress";
declare module "@smui/list";
declare module "@smui/menu";
declare module "@smui/menu-surface";
declare module "@smui/notched-outline";
declare module "@smui/paper";
declare module "@smui/radio";
declare module "@smui/ripple";
declare module "@smui/select";
declare module "@smui/slider";
declare module "@smui/snackbar";
declare module "@smui/switch";
declare module "@smui/tab";
declare module "@smui/tab-bar";
declare module "@smui/tab-indicator";
declare module "@smui/tab-scroller";
declare module "@smui/textfield";
declare module "@smui/top-app-bar";

tsconfig.jsonのtypingに@smuiを追加

tsconfig.json

{
  ...
  "compilerOptions": {
    "types": ["svelte", "node", "@sapper", "@smui"],  // @smuiを追記
    ...
  }
}

rollup.config.jsを修正

rollup.config.js

import postcss from "rollup-plugin-postcss"; // 追加
...
const postcssOptions = () => ({ // 追加
  extensions: [".scss", ".sass"],
  extract: false,
  minimize: true,
  use: [
    [
      "sass",
      {
        includePaths: [
          "./src/theme",
          "./node_modules",
        ],
      },
    ],
  ],
});
...

export default {
  client: {
    ...
    plugins: [
      ...
      typescript({sourceMap: !production}),
      postcss(postcssOptions()), // 追加
      ...
    ],
  },
  ...
  server: {
    ...
    plugins: [
      ...
      typescript({sourceMap: !production}),
      postcss(postcssOptions()), // 追加
      ...
    ],
  },
}
...

サンプルコード

src/routes/index.svelteを編集

<script lang="ts">
  import { title } from "../models/common";
  import Button from "@smui/button"; // 追加
</script>
...
<Button variant="raised">Button</Button> <!-- 追加 -->

リップル妨害の解除とアウトライン削除のスタイルを追加

stypes/tailwindcss

/* 追加のスタイルはここに記述 */
...

/* ripple妨害の解除とアウトライン削除 */
*,
*::before,
*::after {
  border-width: unset;
  border-style: unset;
  border-color: unset;
}
button:focus {
  outline: unset;
  outline: unset;
}
img {
  border-style: none;
}

.card-container {
  user-select: none !important;
}

CSSファイルを生成

static/global.cssを生成

$ yarn postcss styles/tailwind.css -o static/global.css