LoginSignup
sosososo24
@sosososo24

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

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

No Answers yet.

Your answer might help someone💌