回答編集履歴
1
全体的に改修
test
CHANGED
@@ -1,26 +1,60 @@
|
|
1
|
-
|
1
|
+
今回の質問で初めてわかったのですが、
|
2
|
+
|
3
|
+
LaravelはNode.jsの[Webpack](https://webpack.js.org/)を利用してCSSやJSファイルを生成しているようです。
|
2
4
|
|
3
5
|
|
4
6
|
|
5
|
-
そもそもLravelはPHPのWebサイトを構築するフレームワークなだけなので、
|
6
|
-
|
7
|
-
Node.jsやnpmとは1ミリも関係ありません。
|
8
|
-
|
9
|
-
|
7
|
+
[https://github.com/laravel/laravel/blob/master/package.json](https://github.com/laravel/laravel/blob/master/package.json)
|
10
8
|
|
11
9
|
|
12
10
|
|
13
|
-
|
11
|
+
```JSON
|
14
12
|
|
15
|
-
|
13
|
+
{
|
16
14
|
|
17
|
-
|
15
|
+
"private": true,
|
18
16
|
|
17
|
+
"scripts": {
|
19
18
|
|
19
|
+
"dev": "npm run development",
|
20
20
|
|
21
|
-
|
21
|
+
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
|
22
22
|
|
23
|
+
"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",
|
24
|
+
|
23
|
-
|
25
|
+
"watch-poll": "npm run watch -- --watch-poll",
|
26
|
+
|
27
|
+
"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",
|
28
|
+
|
29
|
+
"prod": "npm run production",
|
30
|
+
|
31
|
+
"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"
|
32
|
+
|
33
|
+
},
|
34
|
+
|
35
|
+
"devDependencies": {
|
36
|
+
|
37
|
+
"axios": "^0.17",
|
38
|
+
|
39
|
+
"bootstrap": "^4.0.0",
|
40
|
+
|
41
|
+
"popper.js": "^1.12",
|
42
|
+
|
43
|
+
"cross-env": "^5.1",
|
44
|
+
|
45
|
+
"jquery": "^3.2",
|
46
|
+
|
47
|
+
"laravel-mix": "^2.0",
|
48
|
+
|
49
|
+
"lodash": "^4.17.4",
|
50
|
+
|
51
|
+
"vue": "^2.5.7"
|
52
|
+
|
53
|
+
}
|
54
|
+
|
55
|
+
}
|
56
|
+
|
57
|
+
```
|
24
58
|
|
25
59
|
|
26
60
|
|
@@ -28,68 +62,104 @@
|
|
28
62
|
|
29
63
|
|
30
64
|
|
31
|
-
|
65
|
+
実際にWebpackを使ってJSやCSSファイルをコンパイルするとかなり大変です。
|
32
66
|
|
67
|
+
そこで、Laravelでは開発者向けに簡単に使えるライブラリとドキュメントが用意されています。
|
68
|
+
|
33
|
-
|
69
|
+
Laravel Mixというプロジェクトのようです。
|
34
70
|
|
35
71
|
|
36
72
|
|
37
|
-
|
73
|
+
[Laravel 5.5 アセットのコンパイル(Laravel Mix)](https://readouble.com/laravel/5.5/ja/mix.html)
|
38
74
|
|
39
|
-
{
|
40
75
|
|
41
|
-
"name": "laravel-mix",
|
42
76
|
|
43
|
-
|
77
|
+
プロジェクトルートにある[webpack.mix.js](https://github.com/laravel/laravel/blob/master/webpack.mix.js)を編集することで、
|
44
78
|
|
45
|
-
|
79
|
+
ある程度ファイルの作り方を制御出来るようですね。
|
46
80
|
|
47
|
-
"scripts": {
|
48
81
|
|
49
|
-
"webpack": "NODE_ENV=development webpack --progress --hide-modules",
|
50
82
|
|
51
|
-
|
83
|
+
```JavaScript
|
52
84
|
|
53
|
-
|
85
|
+
mix.js('resources/assets/js/app.js', 'public/js')
|
54
86
|
|
55
|
-
|
87
|
+
.sass('resources/assets/sass/app.scss', 'public/css');
|
56
|
-
|
57
|
-
"test": "nyc ava --verbose --serial",
|
58
|
-
|
59
|
-
"posttest": "nyc report --reporter=html"
|
60
|
-
|
61
|
-
},
|
62
|
-
|
63
|
-
...
|
64
|
-
|
65
|
-
}
|
66
88
|
|
67
89
|
```
|
68
90
|
|
69
91
|
|
70
92
|
|
71
|
-
`npm run dev`は`NODE_ENV=development webpack --watch --progress --hide-modules`のエイリアスのようですね。
|
72
|
-
|
73
|
-
|
93
|
+
---
|
74
|
-
|
75
|
-
WebpackというJavaScriptファイル1個にするNode.js製のアプリを使って生成しているらしいことがわかります。
|
76
94
|
|
77
95
|
|
78
96
|
|
79
|
-
ざっとプロジェクト内を眺めたところ、このファイルを編集すればいけそうですね。
|
80
|
-
|
81
|
-
[
|
97
|
+
> [materialize](http://materializecss.com/)を入れたい
|
82
98
|
|
83
99
|
|
84
100
|
|
85
|
-
|
101
|
+
ドキュメントを見たところ、
|
86
102
|
|
87
|
-
|
103
|
+
自分でresourcesの各ファイルを編集してrequireして導入してくれという仕組みのようですね。
|
88
104
|
|
89
105
|
|
90
106
|
|
91
|
-
|
107
|
+
[resources/assets/js/app.js](https://github.com/laravel/laravel/blob/master/resources/assets/js/app.js)
|
92
108
|
|
93
|
-
package.jsonと同階層の`node_modules/materialize/`配下に存在すると思いますので、
|
94
109
|
|
110
|
+
|
111
|
+
`require('./bootstrap.js');`の行の次の行にでも差し込んであげれば良いかと思います。
|
112
|
+
|
113
|
+
何を?調べていきましょうか。
|
114
|
+
|
115
|
+
|
116
|
+
|
117
|
+
実際に`npm install materialize-css`で導入したところ、
|
118
|
+
|
119
|
+
`node_modules/materialize-css/dist/js/materialize.js`というファイルがありました。
|
120
|
+
|
121
|
+
その14行目に`jQuery = $ = require('jquery');`という記述があるように、jQueryが宣言されていなければ自分で勝手に導入してくる仕様のようです。
|
122
|
+
|
123
|
+
|
124
|
+
|
125
|
+
更に`node_modules/materialize-css/package.json`にjQueryが依存モジュールとして定義されているので、materialize.jsを呼べば解決のようですね。
|
126
|
+
|
127
|
+
Node.jsのrequireは`./`等のディレクトリパスからスタートすると既存のディレクトリをベースに探しに行きますが、
|
128
|
+
|
129
|
+
いきなり名前から始まるとnode_modules配下のディレクトリからパッケージを探します。
|
130
|
+
|
95
|
-
|
131
|
+
従って下記のように修正すれば導入出来るかと思います。
|
132
|
+
|
133
|
+
|
134
|
+
|
135
|
+
```JavaScript
|
136
|
+
|
137
|
+
require('./bootstrap.js');
|
138
|
+
|
139
|
+
require('materialize-css/dist/js/materialize.js');
|
140
|
+
|
141
|
+
```
|
142
|
+
|
143
|
+
|
144
|
+
|
145
|
+
---
|
146
|
+
|
147
|
+
|
148
|
+
|
149
|
+
次にCSS側も導入していきましょう。
|
150
|
+
|
151
|
+
JSと同じくresources配下のファイルを使って勝手にやってくださいという感じの仕様みたいですね。
|
152
|
+
|
153
|
+
|
154
|
+
|
155
|
+
[resources/assets/sass/app.scss](https://github.com/laravel/laravel/blob/master/resources/assets/sass/app.scss)
|
156
|
+
|
157
|
+
SASSはCSSやSASSを自由にインポート出来ます。
|
158
|
+
|
159
|
+
書式は`@import 'ファイルパス';`ですが、node_modulesを勝手に見てくれるような機能はなかったと思いますので、
|
160
|
+
|
161
|
+
`../../../node_modules/materialize-css/dist/css/materialize.css`みたいなパスで行けるんじゃないですかね?
|
162
|
+
|
163
|
+
|
164
|
+
|
165
|
+
何度か試行錯誤すれば設置出来るかと思います。
|