你好，
我想請問一下，
因為我原本的專案是用:Vue3+Vue-Cli+Scss去編寫，
打包後發現專案大小達到20MB...光css檔案就高達8MB。
於是我決定改用Vue3+Vite+TailwindCss去編寫。

但是遇到一個問題，就是專案其中有兩個檔案，因為跟chart.js有關，
所以我就只有引用原本的css，沒去更改成Tailwind(因為很麻煩)
如下:

//A.vue跟B.vue一樣
<script>
import ChartCircleBox from '../components/ChartCircleBox.vue'
</script>
<style scoped>
    @import '../assets/css/pages/j_style.css';
    @import '../assets/css/pages/dark.css';
    
    .body{background-color: #1a114e;}
    table{width: 100%;}
</style>

結果打包後的專案，這兩頁(A、B)的樣式、排版就遺失了，img圖片也抓不到。
不過長條圖倒是還在，沒有問題。


不過有一個很神奇的事情
子組件的ChartCircleBox，居然讀得到j_style.css的樣式(顏色都是寫在這裡)

//ChartCircleBox.vue
<template>
    <div v-for="(item,index) in itemState" :key="index">
        <div class="CircleBg_gn" style="background-color: gray;" v-if="item == 0"></div>
        <div class="CircleBg_gn" v-else-if="item == 1"></div>
        <div class="CircleBg_ltorg" v-else-if="item == 2"></div>
        <div class="CircleBg_rd" v-else-if="item == 3"></div>
        <div class="CircleBg_gn" style="background-color: gray;" v-else></div>
    </div>
</template>
<style scoped>
    @import '../../assets/css/pages/j_style.css';
</style>

居然有顏色!!

以下是我的其他設定，

//vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: "./"
})

//postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

//tailwind.config.js
module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, 
  variants: {
    extend: {},
  },
  plugins: [],
}

這是我的package.json
(我有試著安裝css-loader跟style-loader跟url-loader並在webpack.config.js設定它們，但好像沒有作用..?所以就把它們都刪除了)

{
  "name": "xxxxxxxxx",
  "version": "xxxxxxx",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "axios": "^0.22.0",
    "highcharts-vue": "^1.4.0",
    "vue": "^3.2.13",
    "vue-i18n": "^9.2.0-beta.11",
    "vue-router": "^4.0.11",
    "vue3-carousel": "^0.1.27",
    "vue3-click-away": "^1.2.1",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.0",
    "autoprefixer": "^10.3.6",
    "postcss": "^8.3.8",
    "tailwindcss": "^2.2.16",
    "vite": "^2.5.10"
  }
}

懇請大家幫幫忙。感謝。