Astroでbuildした際のcssファイルを分割したい!!
駆け出しコーダーです。初めてQiitaで質問させていただきます。
分かりにくい点があるかもしれないですが、よろしくお願いいたします。
Astroの環境構築している際に下記について、解決方法を教えていただけますと幸いです。
解決したいこと
Astroでbuildした際のcssファイルを分割したい!!
実装内容
srcフォルダに配置したscssファイルをimport
---
import "../sass/ress.scss";
import "../sass/main.scss";
---
現状:コンパイル後の内容(一つにまとまる)
<link rel="stylesheet" href="../assets/css/style.css" />
理想:コンパイル後の内容(複数に分けたい)
<link rel="stylesheet" href="../assets/css/ress.css" />
<link rel="stylesheet" href="../assets/css/main.css" />
上記のようにすることはできるのでしょうか。
buildの設定は下記内容にしております。
import { defineConfig } from "astro/config";
import relativeLinks from "astro-relative-links";
export default defineConfig({
integrations: [relativeLinks()],
vite: {
build: {
// minify: false,
rollupOptions: {
output: {
assetFileNames: (assetInfo) => {
let extType = assetInfo.name.split(".")[1];
if (/ttf|otf|eot|woff|woff2/i.test(extType)) {
extType = "fonts";
}
if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
extType = "images";
}
if (extType === "css") {
return `assets/css/style.css`;
}
return `assets/${extType}/[name][extname]`;
},
},
entryFileNames: "assets/js/[name].js",
},
},
},
});
何卒よろしくお願いいたします。
0