はじめに
こんにちは、せぃゆーです。
Laravel6でTailwindcssをインストールしようとしたらエラーでうまくいかなかったが、なんとか解決できたので自分なりの解決策を書こうと思います
出力されるエラー
Error: PostCSS plugin posModule build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin postcss-purgecss requires PostCSS 8.
どうやらPostCSS 8が必要らしい(この辺よくわかってないです。)
解決策
プロジェクト作成/laravel/uiのインストール/vueインストール
この部分は今回の件とは関係ないので特に説明は行わず次に行きます
php artisan ui vue –authはログイン機能が欲しいだけなのでbootstrapでも問題ないです。
(最終的にはTailwindcssを使いのでテンプレートの書き換えは必要になります)
cd my-project
composer create-project --prefer-dist laravel/laravel . "6.*"
composer require laravel/ui:^1.0 --dev
php artisan ui vue --auth
bootstrapはいらないので削除
- ./resources/sass/_variables.scssの削除
- ./resources/sass/app.scssからbootstrapの記述削除
- ./package.jsonから削除
- ./resources/js/bootstrap.jsのbootstrapの読み込みを削除
./resources/sass/app.scssからbootstrapの記述削除
--- ./resources/sass/app.scss
+++ ./resources/sass/app.scss
@@ -1,9 +1,4 @@
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
-// Variables
-@import 'variables';
-
-// Bootstrap
-@import '~bootstrap/scss/bootstrap';
./package.jsonから削除
--- ./package.json
+++ ./package.json
@@ -11,7 +11,6 @@
},
"devDependencies": {
"axios": "^0.19",
- "bootstrap": "^4.0.0",
"cross-env": "^7.0",
"jquery": "^3.2",
"laravel-mix": "^5.0.1",
./resources/js/bootstrap.jsのbootstrapの読み込みを削除
--- ./resources/js/bootstrap.js
+++ ./resources/js/bootstrap.js
@@ -10,7 +10,6 @@
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
- require('bootstrap');
} catch (e) {}
/**
bootstrapを削除したのでいったんnpm install
npm install
Tailwindと必要なパッケージの追加
- Tailwindcss
- postCSS8
- postCSS8を使うためにlaravel-mix6
(ベータ版)6がでてました - 使用していないcssを削除するpurgecss(laravel-mix-purgecss)
Laravel-mixを5 -> 6にすることでpostCSS8に対応できるらしい
npm install tailwindcss postcss@^8.1 laravel-mix@^6 laravel-mix-purgecss --save-dev
Tailwindのコンフィグファイル作成
npx tailwindcss init
webpack.mix.jsを修正
- Tailwindcssを使う準備
- Laravel-mix6ではVueの利用を明示的に記載
- purgecssの追加
./resources/sass/app.scssにTailwind追加
--- ./resources/sass/app.scss
+++ ./resources/sass/app.scss
@@ -1,3 +1,7 @@
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
laravelmix6ではVueの使用を明示的に記載/purgecssでファイルを小さく
--- ./webpack.mix.js
+++ ./webpack.mix.js
@@ -1,4 +1,6 @@
const mix = require('laravel-mix');
+const tailwindcss = require('tailwindcss');
+require('laravel-mix-purgecss');
/*
|--------------------------------------------------------------------------
@@ -12,5 +14,10 @@
*/
mix.js('resources/js/app.js', 'public/js')
- .sass('resources/sass/app.scss', 'public/css');
+ .vue()
+ .sass('resources/sass/app.scss', 'public/css')
+ .options({
+ processCssUrls: false,
+ postCss: [ tailwindcss('./tailwind.config.js') ],
+ })
+ .purgeCss();
laravel-mix6用にpackage.jsonを修正
--- ./package.json
+++ ./package.json
@@ -2,12 +2,12 @@
"private": true,
"scripts": {
"dev": "npm run development",
- "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
- "watch": "npm run development -- --watch",
- "watch-poll": "npm run watch -- --watch-poll",
- "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
+ "development": "mix",
+ "watch": "mix watch",
+ "watch-poll": "mix watch -- --watch-options-poll=1000",
+ "hot": "mix watch --hot",
"prod": "npm run production",
- "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --config=node_modules/laravel-mix/setup/webpack.config.js"
+ "production": "mix --production"
},
"devDependencies": {
"axios": "^0.19",
npm run dev / npm run prodでビルドできるか確認しましょう
まとめ
私の環境ではひとまずこれでTailwindcssが使えるようになりました。
Laravel-Mixを6にする影響などがはっきりしていませんが、とりあえずこれで進めようと思います。
コメント