Dockerで立てたLaravelの10系におけるCSS、SCSS、JSの読み込ませかた

この記事ではDockerで立てたバージョン10系のLaravelでのCSS、SCSS、JSの読み込ませかたの解説を行っています。

環境

以下のような環境で利用してます。

• Laravel v10.29.0
• npm v9.8.0
• node.js v20.5.1

手順

順番としては以下になります。

1. CSS、SCSS、JSファイルの配置
2. vite.config.jsファイルの修正
3. npm run devの実行
4. docker-compose.yml（compose.yml）とDockerfileの修正
5. package.jsonの更新

CSS、SCSS、JSファイルの配置

まずは、インストールしたLaravelの直下にあるresourcesフォルダに適用させたいCSSファイル、SCSSファイル、JSファイルを配置してください。

今回は例として「test.scss」と「test.js」を読み込ませる想定で記載します。

vite.config.jsファイルの修正

vite.config.jsを以下のように修正してください。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
                'resources/sass/test.scss',
                'resources/js/test.js',
            ],
            refresh: true,
        }),
    ],
    server: {
      host: true,
      hmr: {
          host: 'localhost',
      },
      watch: {
          usePolling: true,
      },
    },
});

npm run devの実行

Dockerを使っている場合は、対象のディレクトリに入って以下コマンドを実行

docker-compose exec 対象サービス名 bash

docker-compose.yml（compose.yml）とDockerfileの修正

このままだとviteでコンパイルされたcss等はポートが5173になるので、見に行くことができず検証ツールのコンソールでエラーを吐いてしまいます。

そこでdocker-compose.yml(compose.yml)とphpのDockerfileを変更します。

...
app:
    build:
      context: .
      dockerfile: ./infra/docker/php/Dockerfile
    volumes:
      - ./src:/var/www/html
    ports:
      - 5173:5173
    environment:
...

FROM php:8.1-fpm
EXPOSE 5173
RUN apt-get update \
...

Dockerfileへの変更を反映するには、Dockerコンテナを再起動する必要があります。
この時、composerとnpmのinstallコマンドを再実行することに注意してください。理由はこの記事の下部に書きます。

> docker compose down
> docker compose up -d --build
> docker compose exec l9vitedev-app bash
$ composer install
$ npm install

package.jsonの更新

最後にnpm run devコマンドを変更します。

{
    "private": true,
    "scripts": {
        "dev": "vite --host",
        "build": "vite build"
    },
    ...
}

[sass] Top-level selectors may not contain the parent selector "&".エラーが出た場合

[sass] Top-level selectors may not contain the parent selector "&".というエラーは"&"が通常はネストされたセレクタ内でのみ使用されるのに対し、ネストされていない時に"&"利用すると起こるエラーとなっています。

&.hogehoge {
  // some styles here
}

以下のように修正してみてください。

.fugafuga {
  &.hogehoge {
    // some styles here
  }
}