回答編集履歴
1
全体的に改修
answer
CHANGED
|
@@ -1,48 +1,83 @@
|
|
|
1
|
-
|
|
1
|
+
今回の質問で初めてわかったのですが、
|
|
2
|
+
LaravelはNode.jsの[Webpack](https://webpack.js.org/)を利用してCSSやJSファイルを生成しているようです。
|
|
2
3
|
|
|
3
|
-
そもそもLravelはPHPのWebサイトを構築するフレームワークなだけなので、
|
|
4
|
-
Node.jsやnpmとは1ミリも関係ありません。
|
|
5
|
-
|
|
4
|
+
[https://github.com/laravel/laravel/blob/master/package.json](https://github.com/laravel/laravel/blob/master/package.json)
|
|
6
5
|
|
|
6
|
+
```JSON
|
|
7
|
+
{
|
|
8
|
+
"private": true,
|
|
7
|
-
|
|
9
|
+
"scripts": {
|
|
10
|
+
"dev": "npm run development",
|
|
11
|
+
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
|
|
12
|
+
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
|
|
13
|
+
"watch-poll": "npm run watch -- --watch-poll",
|
|
14
|
+
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
|
|
15
|
+
"prod": "npm run production",
|
|
16
|
+
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
|
|
17
|
+
},
|
|
18
|
+
"devDependencies": {
|
|
19
|
+
"axios": "^0.17",
|
|
20
|
+
"bootstrap": "^4.0.0",
|
|
21
|
+
"popper.js": "^1.12",
|
|
22
|
+
"cross-env": "^5.1",
|
|
23
|
+
"jquery": "^3.2",
|
|
8
|
-
|
|
24
|
+
"laravel-mix": "^2.0",
|
|
25
|
+
"lodash": "^4.17.4",
|
|
9
|
-
|
|
26
|
+
"vue": "^2.5.7"
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
```
|
|
10
30
|
|
|
11
|
-
- [Laravel5.5をインストールしてLaravel Mixの実行まで](https://qiita.com/horikeso/items/39beb56b81b321a03f31)
|
|
12
|
-
-
|
|
31
|
+
---
|
|
13
32
|
|
|
33
|
+
実際にWebpackを使ってJSやCSSファイルをコンパイルするとかなり大変です。
|
|
34
|
+
そこで、Laravelでは開発者向けに簡単に使えるライブラリとドキュメントが用意されています。
|
|
35
|
+
Laravel Mixというプロジェクトのようです。
|
|
36
|
+
|
|
37
|
+
[Laravel 5.5 アセットのコンパイル(Laravel Mix)](https://readouble.com/laravel/5.5/ja/mix.html)
|
|
38
|
+
|
|
39
|
+
プロジェクトルートにある[webpack.mix.js](https://github.com/laravel/laravel/blob/master/webpack.mix.js)を編集することで、
|
|
40
|
+
ある程度ファイルの作り方を制御出来るようですね。
|
|
41
|
+
|
|
42
|
+
```JavaScript
|
|
43
|
+
mix.js('resources/assets/js/app.js', 'public/js')
|
|
44
|
+
.sass('resources/assets/sass/app.scss', 'public/css');
|
|
45
|
+
```
|
|
46
|
+
|
|
14
47
|
---
|
|
15
48
|
|
|
16
|
-
|
|
49
|
+
> [materialize](http://materializecss.com/)を入れたい
|
|
17
|
-
package.jsonから一部抜粋します。
|
|
18
50
|
|
|
51
|
+
ドキュメントを見たところ、
|
|
52
|
+
自分でresourcesの各ファイルを編集してrequireして導入してくれという仕組みのようですね。
|
|
53
|
+
|
|
54
|
+
[resources/assets/js/app.js](https://github.com/laravel/laravel/blob/master/resources/assets/js/app.js)
|
|
55
|
+
|
|
56
|
+
`require('./bootstrap.js');`の行の次の行にでも差し込んであげれば良いかと思います。
|
|
57
|
+
何を？調べていきましょうか。
|
|
58
|
+
|
|
59
|
+
実際に`npm install materialize-css`で導入したところ、
|
|
60
|
+
`node_modules/materialize-css/dist/js/materialize.js`というファイルがありました。
|
|
61
|
+
その14行目に`jQuery = $ = require('jquery');`という記述があるように、jQueryが宣言されていなければ自分で勝手に導入してくる仕様のようです。
|
|
62
|
+
|
|
63
|
+
更に`node_modules/materialize-css/package.json`にjQueryが依存モジュールとして定義されているので、materialize.jsを呼べば解決のようですね。
|
|
64
|
+
Node.jsのrequireは`./`等のディレクトリパスからスタートすると既存のディレクトリをベースに探しに行きますが、
|
|
65
|
+
いきなり名前から始まるとnode_modules配下のディレクトリからパッケージを探します。
|
|
66
|
+
従って下記のように修正すれば導入出来るかと思います。
|
|
67
|
+
|
|
19
|
-
```
|
|
68
|
+
```JavaScript
|
|
20
|
-
{
|
|
21
|
-
"name": "laravel-mix",
|
|
22
|
-
"version": "2.0.0",
|
|
23
|
-
|
|
69
|
+
require('./bootstrap.js');
|
|
24
|
-
"scripts": {
|
|
25
|
-
"webpack": "NODE_ENV=development webpack --progress --hide-modules",
|
|
26
|
-
"dev": "NODE_ENV=development webpack --watch --progress --hide-modules",
|
|
27
|
-
|
|
70
|
+
require('materialize-css/dist/js/materialize.js');
|
|
28
|
-
"production": "NODE_ENV=production webpack --progress --hide-modules",
|
|
29
|
-
"test": "nyc ava --verbose --serial",
|
|
30
|
-
"posttest": "nyc report --reporter=html"
|
|
31
|
-
},
|
|
32
|
-
...
|
|
33
|
-
}
|
|
34
71
|
```
|
|
35
72
|
|
|
36
|
-
`npm run dev`は`NODE_ENV=development webpack --watch --progress --hide-modules`のエイリアスのようですね。
|
|
37
|
-
|
|
73
|
+
---
|
|
38
|
-
WebpackというJavaScriptファイル1個にするNode.js製のアプリを使って生成しているらしいことがわかります。
|
|
39
74
|
|
|
75
|
+
次にCSS側も導入していきましょう。
|
|
40
|
-
|
|
76
|
+
JSと同じくresources配下のファイルを使って勝手にやってくださいという感じの仕様みたいですね。
|
|
41
|
-
[laravel-mix/src/config.js](https://github.com/JeffreyWay/laravel-mix/blob/master/src/config.js)
|
|
42
77
|
|
|
43
|
-
|
|
78
|
+
[resources/assets/sass/app.scss](https://github.com/laravel/laravel/blob/master/resources/assets/sass/app.scss)
|
|
44
|
-
|
|
79
|
+
SASSはCSSやSASSを自由にインポート出来ます。
|
|
80
|
+
書式は`@import 'ファイルパス';`ですが、node_modulesを勝手に見てくれるような機能はなかったと思いますので、
|
|
81
|
+
`../../../node_modules/materialize-css/dist/css/materialize.css`みたいなパスで行けるんじゃないですかね？
|
|
45
82
|
|
|
46
|
-
`npm install materialize`で導入したJSやCSSのファイルは、
|
|
47
|
-
package.jsonと同階層の`node_modules/materialize/`配下に存在すると思いますので、
|
|
48
|
-
|
|
83
|
+
何度か試行錯誤すれば設置出来るかと思います。
|