# React+TS+TailwindCSS+SCSS+Vite
---
###### tags: `Infra` `工作相關` `React `前端學習` `TailwindCSS` `2023/10/19`

TailWindCSS 官方文件: https://tailwindcss.com/docs/guides/vite

1. 參照 TailwindCSS 官方文件教學, 輸入指令:

`npm create vite@latest react-ts-tailwind-scss-vite -- --template react`

react-ts-tailwind-scss-vite -> 這是 project 的命名方式

2. 安裝 TailwwindCSS autoprefixer:

npm install -D tailwindcss postcss autoprefixer

3. 初始化 TailwindCSS:

npx tailwindcss init -p

4. 設定 tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './components/**/*.{html,js,ts,jsx,tsx}',
    './pages/**/*.{html,js,ts,jsx,tsx}',
    './public/index.html',
    './src/**/*.{html,js,ts,jsx,tsx}',
    './src/**/*',
    './index.html',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

5. 設定 index.css:
加入 `@tailwind` 指令到 `./src/index.css`

@tailwind base;
@tailwind components;
@tailwind utilities;

6. 運行環境:

npm run dev

成功執行後 ↓


7. 試著 Hello World!
在 App.jsx 中加入模板和tailwindcss 語法 ↓

      <h1 className="text-3xl font-bold underline">
        Hello world!
      </h1>


---

# 安裝 SASS/SCSS 到專案中

1. 要先確保安裝相關套件, 包括 `sass` 以及 `sass-loader`

npm install sass sass-loader --save-dev

2. 配置 Vite, 在 `vite.config.js` 或 `vite.config.ts` 中, 來引入 scss

// vite.config.js 或 vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import sass from 'sass';

export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      scss: {
        implementation: sass,
      },
    },
  },
});

3. 應對專案, 建立一個 scss 文件:
例如在 styles 資料夾 中建立一個 `style.scss` 檔案
並且在 `App.jsx` 中引入全域樣式 ↓

import './styles/style.scss'


4. 組件的話也可以個別引入 scss 文件:
例如:

// MyComponent.tsx

import React from 'react';
import './styles.scss'; // 引入 SCSS 文件

function MyComponent() {
  return (
    <div className="my-component">
      {/* ... */}
    </div>
  );
}

export default MyComponent;

----

# 如果發現 PROBLEMS


參考: https://hackmd.io/@FortesHuang/S1I2iF7v5#Stylelint1

可以選擇使用語法檢查器, 在VSCODE中安裝套件 StyleLint

並且去設定檔按下 `F1` `>settings.json`

將預設的樣式檢查器關閉:

"css.validate": false,
"less.validate": false,
"scss.validate": false,