Upgrade to Pro — share decks privately, control downloads, hide ads and more …

VSCodeの拡張機能開発で Tailwind CSSを使う

Kazuhiro Ebara
May 10, 2024
220

VSCodeの拡張機能開発で Tailwind CSSを使う

2024/05/10に行われたMeguro.css #10 @ oRoで発表した資料です。

Kazuhiro Ebara

May 10, 2024
Tweet

Transcript

  1. Tailwind CSSの導入の経緯 VSCodeのWebview部分の見通しが悪い。 export function activate(context: ExtensionContext) { … panel.webview.html

    = getWebviewContent(); … } function getWebviewContent() { return `<!DOCTYPE html>   <html lang="en">   <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Cat Coding</title>   </head>   <body>    <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="300" />   </body>  </html>`; }
  2. Tailwind CSSを入れてみる 今回はReactをすでに入れた状態から導入してみます。 yarn add -D tailwindcss npx tailwindcss init

    上記以外に必要なパッケージも installします。 yarn add -D mini-css-extract-plugin css-minimizer-webpack-plugin css-loader postcss postcss-loader autoprefixer
  3. webpack.config.js const baseConfig = { plugins: [ new MiniCssExtractPlugin({ filename:

    "./src/index.css", }), ], module: { rules: [ { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"], }, ] }, optimization: { minimizer: [new CssMinimizerPlugin()], }, } Webpack.config.jsの更新
  4. webpack.config.js const styleConfig = { ...baseConfig, entry: "./src/index.css", output: {

    path: path.resolve(__dirname, "dist"), filename: "index.css", }, }; Webpack.config.jsの更新
  5. extension.js function getUri(webview: Webview, extensionUri: Uri, pathList: string[]) { return

    webview.asWebviewUri(Uri.joinPath(extensionUri, ...pathList)); } function getWebviewContent(webview: Webview, extensionUri: Uri) { const styleUri = getUri(webview, extensionUri, ["dist", "src", "index.css"]); return ` <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>${channelName}</title> <link href="${styleUri}" rel="stylesheet"> </head> <body> <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="300" /> </body> </html>`; } extension.jsファイルの更新