実現したいこと
- tailwindcssでビルドするcssファイルが出力されるようにしたい。
前提
環境
django
docker
tailwindcss
発生している問題・エラーメッセージ
tailwindcssのビルドで出力される想定のファイルが出力されない
下記のpackage.json、tailwind.config.js、dockerfileでコンテナ作成時に
cssファイルをビルドするように処理します。
該当のソースコード
package.json
1{ 2 "scripts": { 3 "build-css": "tailwindcss build -i ./src/styles.css -o ./top_page/static/css/styles.css" 4 }, 5 "dependencies": { 6 "tailwindcss": "^2.2.4" 7 } 8}
tailwind.config.js
1module.exports = { 2 content: [ 3 '../**/templates/*.html', 4 ], 5 theme: { 6 extend: { 7 colors: { 8 9 } 10 }, 11 }, 12 variants: { 13 extend: {}, 14 }, 15 plugins: [], 16 };
dockerfile
1# ベースイメージとしてPython公式イメージを使用2FROM python:3.8 3 4# 環境変数を設定5ENV PYTHONUNBUFFERED 1 6 7# Node.js のインストール8RUN apt-get update && apt-get install -y curl \ 9 && curl -sL https://deb.nodesource.com/setup_14.x | bash - \ 10 && apt-get install -y nodejs npm 11 12# Node.jsに対するメモリ制限の設定13ENV NODE_OPTIONS=--max-old-space-size=4096 14 15# ワークディレクトリを作成16RUN mkdir /code 17 18# ワークディレクトリを指定19WORKDIR /code 20 21# requirements.txtをコピーし、パッケージをインストール22# Python と Node パッケージをインストール23COPY requirements.txt package.json /code/ 24RUN pip install -r requirements.txt 25RUN npm install 26 27# プロジェクトファイルをコピー28COPY . /code/ 29 30# Tailwind CSS をビルド31RUN npm run build-css
下記画像がフォルダ構成です。
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
0 コメント