webpacker 4.0.2 → 4.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.gitignore +1 -0
- data/.travis.yml +17 -9
- data/CHANGELOG.md +4 -0
- data/Gemfile +0 -1
- data/Gemfile.lock +55 -64
- data/README.md +10 -14
- data/docs/assets.md +20 -10
- data/docs/css.md +54 -1
- data/docs/deployment.md +16 -0
- data/docs/engines.md +8 -0
- data/docs/es6.md +5 -4
- data/docs/troubleshooting.md +9 -0
- data/docs/v4-upgrade.md +12 -2
- data/docs/webpack.md +3 -4
- data/gemfiles/Gemfile-rails-edge +1 -2
- data/gemfiles/Gemfile-rails.4.2.x +1 -2
- data/gemfiles/Gemfile-rails.5.0.x +1 -2
- data/gemfiles/Gemfile-rails.5.1.x +1 -2
- data/gemfiles/Gemfile-rails.5.2.x +1 -2
- data/lib/install/config/babel.config.js +3 -1
- data/lib/install/config/webpacker.yml +1 -1
- data/lib/install/elm.rb +2 -2
- data/lib/install/examples/react/babel.config.js +1 -0
- data/lib/install/examples/vue/hello_vue.js +2 -3
- data/lib/tasks/webpacker/compile.rake +8 -5
- data/lib/webpacker/compiler.rb +8 -4
- data/lib/webpacker/dev_server_runner.rb +6 -0
- data/lib/webpacker/helper.rb +1 -1
- data/lib/webpacker/version.rb +1 -1
- data/lib/webpacker/webpack_runner.rb +6 -0
- data/package.json +26 -24
- data/package/environments/__tests__/base.js +2 -2
- data/package/environments/base.js +2 -2
- data/package/rules/node_modules.js +1 -1
- data/webpacker.gemspec +2 -1
- data/yarn.lock +1335 -1103
- metadata +29 -10
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ca4c04cd7d94f5b71c351ccc33131c7b3674e5fca8dbfd96e58917cc28638490
|
|
4
|
+
data.tar.gz: 8a2924f440cee006085a8b6131de74bc422b99be5c2bda35b98d976b3f4daba6
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 26777525488474c374c6d002d81f24b57e24045f1386f75f5dd937e6da71baa65d5008357cd7e3f1b1ede5dbaf552f03c2e2718c2428a57daac3c744a8326ab1
|
|
7
|
+
data.tar.gz: 8baffc48b354871019ec994ceab2c5595d83aadebcfa66e130c3d8e8c97edb6de8c9f3268aadbb528582cef6a0867b72a97d6144ae5e047e65777057c770eb50
|
data/.gitignore
CHANGED
data/.travis.yml
CHANGED
|
@@ -1,12 +1,19 @@
|
|
|
1
|
-
sudo: false
|
|
2
1
|
language: ruby
|
|
2
|
+
bundler_args: --jobs 3 --retry 3
|
|
3
|
+
dist: xenial
|
|
3
4
|
before_install:
|
|
4
|
-
- gem update
|
|
5
|
+
- gem install rubygems-update && update_rubygems
|
|
6
|
+
# Rails 4.2 doesn't support bundler 2.0, so we need to lock bundler to
|
|
7
|
+
# v1.17.3. This is just for Ruby 2.5 which ships with bundler 2.x on Travis
|
|
8
|
+
# CI while Ruby 2.6 does not.
|
|
9
|
+
# https://github.com/travis-ci/travis-rubies/issues/57#issuecomment-458981237
|
|
10
|
+
- yes | rvm @global do gem uninstall bundler --all
|
|
11
|
+
- yes | rvm @global do gem install bundler -v 1.17.3 || true
|
|
5
12
|
rvm:
|
|
6
13
|
- 2.3.8
|
|
7
|
-
- 2.4.
|
|
8
|
-
- 2.5.
|
|
9
|
-
- 2.6.
|
|
14
|
+
- 2.4.6
|
|
15
|
+
- 2.5.5
|
|
16
|
+
- 2.6.2
|
|
10
17
|
- ruby-head
|
|
11
18
|
gemfile:
|
|
12
19
|
- gemfiles/Gemfile-rails.4.2.x
|
|
@@ -22,7 +29,7 @@ cache:
|
|
|
22
29
|
|
|
23
30
|
install:
|
|
24
31
|
- bundle install
|
|
25
|
-
- nvm install
|
|
32
|
+
- nvm install 10
|
|
26
33
|
- node -v
|
|
27
34
|
- npm i -g yarn
|
|
28
35
|
- yarn
|
|
@@ -33,13 +40,14 @@ script:
|
|
|
33
40
|
- bundle exec rake test
|
|
34
41
|
matrix:
|
|
35
42
|
allow_failures:
|
|
36
|
-
|
|
43
|
+
- gemfile: gemfiles/Gemfile-rails-edge
|
|
44
|
+
- rvm: ruby-head
|
|
37
45
|
exclude:
|
|
38
46
|
- rvm: 2.3.8
|
|
39
47
|
gemfile: gemfiles/Gemfile-rails-edge
|
|
40
|
-
- rvm: 2.4.
|
|
48
|
+
- rvm: 2.4.6
|
|
41
49
|
gemfile: gemfiles/Gemfile-rails-edge
|
|
42
|
-
- rvm: 2.5.
|
|
50
|
+
- rvm: 2.5.5
|
|
43
51
|
gemfile: gemfiles/Gemfile-rails-edge
|
|
44
52
|
- rvm: ruby-head
|
|
45
53
|
gemfile: gemfiles/Gemfile-rails.4.2.x
|
data/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
**Please note that Webpacker 3.1.0 and 3.1.1 have some serious bugs so please consider using either 3.0.2 or 3.2.0**
|
|
2
2
|
|
|
3
|
+
## [[4.0.3]](https://github.com/rails/webpacker/compare/v4.0.2...v4.0.3) - 2019-05-28
|
|
4
|
+
|
|
5
|
+
Please see the diff
|
|
6
|
+
|
|
3
7
|
## [4.0.2] - 2019-03-06
|
|
4
8
|
|
|
5
9
|
- Bump the version on npm
|
data/Gemfile
CHANGED
data/Gemfile.lock
CHANGED
|
@@ -1,21 +1,7 @@
|
|
|
1
|
-
GIT
|
|
2
|
-
remote: https://github.com/rubocop-hq/rubocop.git
|
|
3
|
-
revision: dc69686abf10d9f38ed3a39037fab76ae8874138
|
|
4
|
-
specs:
|
|
5
|
-
rubocop (0.65.0)
|
|
6
|
-
jaro_winkler (~> 1.5.1)
|
|
7
|
-
parallel (~> 1.10)
|
|
8
|
-
parser (>= 2.5, != 2.5.1.1)
|
|
9
|
-
powerpack (~> 0.1)
|
|
10
|
-
psych (>= 3.1.0)
|
|
11
|
-
rainbow (>= 2.2.2, < 4.0)
|
|
12
|
-
ruby-progressbar (~> 1.7)
|
|
13
|
-
unicode-display_width (~> 1.4.0)
|
|
14
|
-
|
|
15
1
|
PATH
|
|
16
2
|
remote: .
|
|
17
3
|
specs:
|
|
18
|
-
webpacker (4.0.
|
|
4
|
+
webpacker (4.0.3)
|
|
19
5
|
activesupport (>= 4.2)
|
|
20
6
|
rack-proxy (>= 0.6.1)
|
|
21
7
|
railties (>= 4.2)
|
|
@@ -23,43 +9,43 @@ PATH
|
|
|
23
9
|
GEM
|
|
24
10
|
remote: https://rubygems.org/
|
|
25
11
|
specs:
|
|
26
|
-
actioncable (5.2.
|
|
27
|
-
actionpack (= 5.2.
|
|
12
|
+
actioncable (5.2.3)
|
|
13
|
+
actionpack (= 5.2.3)
|
|
28
14
|
nio4r (~> 2.0)
|
|
29
15
|
websocket-driver (>= 0.6.1)
|
|
30
|
-
actionmailer (5.2.
|
|
31
|
-
actionpack (= 5.2.
|
|
32
|
-
actionview (= 5.2.
|
|
33
|
-
activejob (= 5.2.
|
|
16
|
+
actionmailer (5.2.3)
|
|
17
|
+
actionpack (= 5.2.3)
|
|
18
|
+
actionview (= 5.2.3)
|
|
19
|
+
activejob (= 5.2.3)
|
|
34
20
|
mail (~> 2.5, >= 2.5.4)
|
|
35
21
|
rails-dom-testing (~> 2.0)
|
|
36
|
-
actionpack (5.2.
|
|
37
|
-
actionview (= 5.2.
|
|
38
|
-
activesupport (= 5.2.
|
|
22
|
+
actionpack (5.2.3)
|
|
23
|
+
actionview (= 5.2.3)
|
|
24
|
+
activesupport (= 5.2.3)
|
|
39
25
|
rack (~> 2.0)
|
|
40
26
|
rack-test (>= 0.6.3)
|
|
41
27
|
rails-dom-testing (~> 2.0)
|
|
42
28
|
rails-html-sanitizer (~> 1.0, >= 1.0.2)
|
|
43
|
-
actionview (5.2.
|
|
44
|
-
activesupport (= 5.2.
|
|
29
|
+
actionview (5.2.3)
|
|
30
|
+
activesupport (= 5.2.3)
|
|
45
31
|
builder (~> 3.1)
|
|
46
32
|
erubi (~> 1.4)
|
|
47
33
|
rails-dom-testing (~> 2.0)
|
|
48
34
|
rails-html-sanitizer (~> 1.0, >= 1.0.3)
|
|
49
|
-
activejob (5.2.
|
|
50
|
-
activesupport (= 5.2.
|
|
35
|
+
activejob (5.2.3)
|
|
36
|
+
activesupport (= 5.2.3)
|
|
51
37
|
globalid (>= 0.3.6)
|
|
52
|
-
activemodel (5.2.
|
|
53
|
-
activesupport (= 5.2.
|
|
54
|
-
activerecord (5.2.
|
|
55
|
-
activemodel (= 5.2.
|
|
56
|
-
activesupport (= 5.2.
|
|
38
|
+
activemodel (5.2.3)
|
|
39
|
+
activesupport (= 5.2.3)
|
|
40
|
+
activerecord (5.2.3)
|
|
41
|
+
activemodel (= 5.2.3)
|
|
42
|
+
activesupport (= 5.2.3)
|
|
57
43
|
arel (>= 9.0)
|
|
58
|
-
activestorage (5.2.
|
|
59
|
-
actionpack (= 5.2.
|
|
60
|
-
activerecord (= 5.2.
|
|
44
|
+
activestorage (5.2.3)
|
|
45
|
+
actionpack (= 5.2.3)
|
|
46
|
+
activerecord (= 5.2.3)
|
|
61
47
|
marcel (~> 0.3.1)
|
|
62
|
-
activesupport (5.2.
|
|
48
|
+
activesupport (5.2.3)
|
|
63
49
|
concurrent-ruby (~> 1.0, >= 1.0.2)
|
|
64
50
|
i18n (>= 0.7, < 2)
|
|
65
51
|
minitest (~> 5.1)
|
|
@@ -67,13 +53,13 @@ GEM
|
|
|
67
53
|
arel (9.0.0)
|
|
68
54
|
ast (2.4.0)
|
|
69
55
|
builder (3.2.3)
|
|
70
|
-
byebug (11.0.
|
|
71
|
-
concurrent-ruby (1.1.
|
|
56
|
+
byebug (11.0.1)
|
|
57
|
+
concurrent-ruby (1.1.5)
|
|
72
58
|
crass (1.0.4)
|
|
73
59
|
erubi (1.8.0)
|
|
74
60
|
globalid (0.4.2)
|
|
75
61
|
activesupport (>= 4.2.0)
|
|
76
|
-
i18n (1.
|
|
62
|
+
i18n (1.6.0)
|
|
77
63
|
concurrent-ruby (~> 1.0)
|
|
78
64
|
jaro_winkler (1.5.2)
|
|
79
65
|
loofah (2.2.3)
|
|
@@ -89,45 +75,50 @@ GEM
|
|
|
89
75
|
mini_portile2 (2.4.0)
|
|
90
76
|
minitest (5.11.3)
|
|
91
77
|
nio4r (2.3.1)
|
|
92
|
-
nokogiri (1.10.
|
|
78
|
+
nokogiri (1.10.3)
|
|
93
79
|
mini_portile2 (~> 2.4.0)
|
|
94
|
-
parallel (1.
|
|
95
|
-
parser (2.6.
|
|
80
|
+
parallel (1.17.0)
|
|
81
|
+
parser (2.6.3.0)
|
|
96
82
|
ast (~> 2.4.0)
|
|
97
|
-
|
|
98
|
-
psych (3.1.0)
|
|
99
|
-
rack (2.0.6)
|
|
83
|
+
rack (2.0.7)
|
|
100
84
|
rack-proxy (0.6.5)
|
|
101
85
|
rack
|
|
102
86
|
rack-test (1.1.0)
|
|
103
87
|
rack (>= 1.0, < 3)
|
|
104
|
-
rails (5.2.
|
|
105
|
-
actioncable (= 5.2.
|
|
106
|
-
actionmailer (= 5.2.
|
|
107
|
-
actionpack (= 5.2.
|
|
108
|
-
actionview (= 5.2.
|
|
109
|
-
activejob (= 5.2.
|
|
110
|
-
activemodel (= 5.2.
|
|
111
|
-
activerecord (= 5.2.
|
|
112
|
-
activestorage (= 5.2.
|
|
113
|
-
activesupport (= 5.2.
|
|
88
|
+
rails (5.2.3)
|
|
89
|
+
actioncable (= 5.2.3)
|
|
90
|
+
actionmailer (= 5.2.3)
|
|
91
|
+
actionpack (= 5.2.3)
|
|
92
|
+
actionview (= 5.2.3)
|
|
93
|
+
activejob (= 5.2.3)
|
|
94
|
+
activemodel (= 5.2.3)
|
|
95
|
+
activerecord (= 5.2.3)
|
|
96
|
+
activestorage (= 5.2.3)
|
|
97
|
+
activesupport (= 5.2.3)
|
|
114
98
|
bundler (>= 1.3.0)
|
|
115
|
-
railties (= 5.2.
|
|
99
|
+
railties (= 5.2.3)
|
|
116
100
|
sprockets-rails (>= 2.0.0)
|
|
117
101
|
rails-dom-testing (2.0.3)
|
|
118
102
|
activesupport (>= 4.2.0)
|
|
119
103
|
nokogiri (>= 1.6)
|
|
120
104
|
rails-html-sanitizer (1.0.4)
|
|
121
105
|
loofah (~> 2.2, >= 2.2.2)
|
|
122
|
-
railties (5.2.
|
|
123
|
-
actionpack (= 5.2.
|
|
124
|
-
activesupport (= 5.2.
|
|
106
|
+
railties (5.2.3)
|
|
107
|
+
actionpack (= 5.2.3)
|
|
108
|
+
activesupport (= 5.2.3)
|
|
125
109
|
method_source
|
|
126
110
|
rake (>= 0.8.7)
|
|
127
111
|
thor (>= 0.19.0, < 2.0)
|
|
128
112
|
rainbow (3.0.0)
|
|
129
113
|
rake (12.3.2)
|
|
130
|
-
|
|
114
|
+
rubocop (0.68.1)
|
|
115
|
+
jaro_winkler (~> 1.5.1)
|
|
116
|
+
parallel (~> 1.10)
|
|
117
|
+
parser (>= 2.5, != 2.5.1.1)
|
|
118
|
+
rainbow (>= 2.2.2, < 4.0)
|
|
119
|
+
ruby-progressbar (~> 1.7)
|
|
120
|
+
unicode-display_width (>= 1.4.0, < 1.6)
|
|
121
|
+
ruby-progressbar (1.10.1)
|
|
131
122
|
sprockets (3.7.2)
|
|
132
123
|
concurrent-ruby (~> 1.0)
|
|
133
124
|
rack (> 1, < 3)
|
|
@@ -139,7 +130,7 @@ GEM
|
|
|
139
130
|
thread_safe (0.3.6)
|
|
140
131
|
tzinfo (1.2.5)
|
|
141
132
|
thread_safe (~> 0.1)
|
|
142
|
-
unicode-display_width (1.
|
|
133
|
+
unicode-display_width (1.5.0)
|
|
143
134
|
websocket-driver (0.7.0)
|
|
144
135
|
websocket-extensions (>= 0.1.0)
|
|
145
136
|
websocket-extensions (0.1.3)
|
|
@@ -148,13 +139,13 @@ PLATFORMS
|
|
|
148
139
|
ruby
|
|
149
140
|
|
|
150
141
|
DEPENDENCIES
|
|
151
|
-
bundler (
|
|
142
|
+
bundler (>= 1.3.0, < 2.0)
|
|
152
143
|
byebug
|
|
153
144
|
minitest (~> 5.0)
|
|
154
145
|
rack-proxy
|
|
155
146
|
rails
|
|
156
147
|
rake (>= 11.1)
|
|
157
|
-
rubocop
|
|
148
|
+
rubocop (< 0.69)
|
|
158
149
|
webpacker!
|
|
159
150
|
|
|
160
151
|
BUNDLED WITH
|
data/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Webpacker
|
|
2
2
|
|
|
3
|
-
](https://travis-ci.org/rails/webpacker)
|
|
4
4
|
[](https://nodejs.org/en/)
|
|
5
5
|
[](https://github.com/rails/webpacker)
|
|
6
6
|
|
|
@@ -34,7 +34,7 @@ in which case you may not even need the asset pipeline. This is mostly relevant
|
|
|
34
34
|
- [Vue](#vue)
|
|
35
35
|
- [Elm](#elm)
|
|
36
36
|
- [Stimulus](#stimulus)
|
|
37
|
-
- [
|
|
37
|
+
- [CoffeeScript](#coffeescript)
|
|
38
38
|
- [Erb](#erb)
|
|
39
39
|
- [Paths](#paths)
|
|
40
40
|
- [Resolved](#resolved)
|
|
@@ -84,15 +84,11 @@ Or add it to your `Gemfile`:
|
|
|
84
84
|
|
|
85
85
|
```ruby
|
|
86
86
|
# Gemfile
|
|
87
|
-
gem 'webpacker', '~>
|
|
87
|
+
gem 'webpacker', '~> 4.x'
|
|
88
88
|
|
|
89
89
|
# OR if you prefer to use master
|
|
90
90
|
gem 'webpacker', git: 'https://github.com/rails/webpacker.git'
|
|
91
91
|
yarn add https://github.com/rails/webpacker.git
|
|
92
|
-
|
|
93
|
-
# OR to try out 4.x pre-release
|
|
94
|
-
gem 'webpacker', '>= 4.0.x'
|
|
95
|
-
yarn add @rails/webpacker@next
|
|
96
92
|
```
|
|
97
93
|
|
|
98
94
|
Finally, run the following to install Webpacker:
|
|
@@ -294,9 +290,9 @@ You can run following commands to upgrade Webpacker to the latest stable version
|
|
|
294
290
|
bundle update webpacker
|
|
295
291
|
rails webpacker:binstubs
|
|
296
292
|
yarn upgrade @rails/webpacker --latest
|
|
297
|
-
yarn
|
|
293
|
+
yarn upgrade webpack-dev-server --latest
|
|
298
294
|
|
|
299
|
-
# Or to install
|
|
295
|
+
# Or to install the latest release (including pre-releases)
|
|
300
296
|
yarn add @rails/webpacker@next
|
|
301
297
|
```
|
|
302
298
|
|
|
@@ -310,7 +306,7 @@ To turn off this option, you will need to change the default setting in `config/
|
|
|
310
306
|
# config/webpacker.yml
|
|
311
307
|
development:
|
|
312
308
|
...
|
|
313
|
-
# Verifies that
|
|
309
|
+
# Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
|
|
314
310
|
check_yarn_integrity: false
|
|
315
311
|
```
|
|
316
312
|
|
|
@@ -335,7 +331,7 @@ new Rails 5.1+ app using `--webpack=react` option:
|
|
|
335
331
|
rails new myapp --webpack=react
|
|
336
332
|
```
|
|
337
333
|
|
|
338
|
-
(or run `bundle exec rails webpacker:install:react` in
|
|
334
|
+
(or run `bundle exec rails webpacker:install:react` in an existing Rails app already
|
|
339
335
|
setup with Webpacker).
|
|
340
336
|
|
|
341
337
|
The installer will add all relevant dependencies using Yarn, changes
|
|
@@ -442,14 +438,14 @@ rails new myapp --webpack=stimulus
|
|
|
442
438
|
|
|
443
439
|
Please read [The Stimulus Handbook](https://stimulusjs.org/handbook/introduction) or learn more about its source code at https://github.com/stimulusjs/stimulus
|
|
444
440
|
|
|
445
|
-
###
|
|
441
|
+
### CoffeeScript
|
|
446
442
|
|
|
447
|
-
To add [
|
|
443
|
+
To add [CoffeeScript](http://coffeescript.org/) support,
|
|
448
444
|
run `bundle exec rails webpacker:install:coffee` on a Rails app already
|
|
449
445
|
setup with Webpacker.
|
|
450
446
|
|
|
451
447
|
An example `hello_coffee.coffee` file will also be added to your project
|
|
452
|
-
in `app/javascript/packs` so that you can experiment with
|
|
448
|
+
in `app/javascript/packs` so that you can experiment with CoffeeScript right away.
|
|
453
449
|
|
|
454
450
|
### Erb
|
|
455
451
|
|
data/docs/assets.md
CHANGED
|
@@ -84,26 +84,36 @@ import 'assets/stylesheets/bar'
|
|
|
84
84
|
## Link in your Rails views
|
|
85
85
|
|
|
86
86
|
You can also link `js/images/styles/fonts` used within your js app in views using
|
|
87
|
-
`asset_pack_path`
|
|
87
|
+
`asset_pack_path` and `image_pack_tag` helpers. These helpers are useful in cases where you just want to
|
|
88
88
|
create a `<link rel="prefetch">` or `<img />` for an asset.
|
|
89
89
|
|
|
90
90
|
```yml
|
|
91
91
|
app/javascript:
|
|
92
92
|
- packs
|
|
93
|
-
-
|
|
94
|
-
- styles
|
|
95
|
-
- hello_react.css
|
|
93
|
+
- app.js
|
|
96
94
|
- images
|
|
97
95
|
- calendar.png
|
|
98
96
|
```
|
|
99
97
|
|
|
98
|
+
```js
|
|
99
|
+
// app/javascript/packs/app.js (or any of your packs)
|
|
100
|
+
|
|
101
|
+
// import all image files in a folder:
|
|
102
|
+
require.context('../images', true)
|
|
103
|
+
```
|
|
104
|
+
|
|
100
105
|
```erb
|
|
101
|
-
|
|
102
|
-
|
|
106
|
+
<%# Rails view, for example app/views/layouts/application.html.erb %>
|
|
107
|
+
|
|
108
|
+
<img src="<%= asset_pack_path 'media/images/calendar.png' %>" />
|
|
109
|
+
<% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
|
|
103
110
|
|
|
104
|
-
|
|
105
|
-
<% # => <img src="/packs/images/calendar.png" /> %>
|
|
111
|
+
<%= image_pack_tag 'media/images/calendar.png' %>
|
|
112
|
+
<% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
|
|
106
113
|
|
|
107
|
-
|
|
108
|
-
|
|
114
|
+
<%# no path resolves to default 'images' folder: %>
|
|
115
|
+
<%= image_pack_tag 'calendar.png' %>
|
|
116
|
+
<% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
|
|
109
117
|
```
|
|
118
|
+
|
|
119
|
+
Note you need to add a `media/` prefix (not `/media/`) to any subfolder structure you might have in `app/javascript`. See more examples in the [tests](https://github.com/rails/webpacker/blob/0b86cadb5ed921e2c1538382e72a236ec30a5d97/test/helper_test.rb#L37).
|
data/docs/css.md
CHANGED
|
@@ -32,7 +32,7 @@ const Hello = props => (
|
|
|
32
32
|
|
|
33
33
|
## Import scoped styles into your JS app
|
|
34
34
|
|
|
35
|
-
Stylesheets end with `.module.*`
|
|
35
|
+
Stylesheets that end with `.module.*` are treated as [CSS Modules](https://github.com/css-modules/css-modules).
|
|
36
36
|
|
|
37
37
|
```sass
|
|
38
38
|
// app/javascript/hello_react/styles/hello-react.module.sass
|
|
@@ -60,6 +60,59 @@ const Hello = props => (
|
|
|
60
60
|
|
|
61
61
|
**Note:** Declared class is referenced as object property in JavaScript.
|
|
62
62
|
|
|
63
|
+
## Import scoped styles into your TypeScript app
|
|
64
|
+
|
|
65
|
+
Using CSS modules with a TypeScript application requires a few differences from a JavaScript app. The CSS / Sass files are the same:
|
|
66
|
+
|
|
67
|
+
```sass
|
|
68
|
+
// app/javascript/hello_react/styles/hello-react.module.sass
|
|
69
|
+
|
|
70
|
+
.helloReact
|
|
71
|
+
padding: 20px
|
|
72
|
+
font-size: 12px
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
There must also be a type definition file for these styles:
|
|
76
|
+
|
|
77
|
+
```typescript
|
|
78
|
+
export const helloReact: string;
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
You can then import the styles like this:
|
|
82
|
+
|
|
83
|
+
```typescript
|
|
84
|
+
// React component example
|
|
85
|
+
// app/javascripts/packs/hello_react.tsx
|
|
86
|
+
|
|
87
|
+
import React from 'react'
|
|
88
|
+
import helloIcon from '../hello_react/images/icon.png'
|
|
89
|
+
import * as styles from '../hello_react/styles/hello-react.module.sass'
|
|
90
|
+
|
|
91
|
+
const Hello = props => (
|
|
92
|
+
<div className={styles.helloReact}>
|
|
93
|
+
<img src={helloIcon} alt="hello-icon" />
|
|
94
|
+
<p>Hello {props.name}!</p>
|
|
95
|
+
</div>
|
|
96
|
+
)
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
You can automatically generate type definitions for the styles by installing the `typed-scss-modules` as a development dependency:
|
|
100
|
+
|
|
101
|
+
```
|
|
102
|
+
yarn add typed-scss-modules --dev
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
Then by adding these lines to your `package.json`:
|
|
106
|
+
|
|
107
|
+
```
|
|
108
|
+
"scripts": {
|
|
109
|
+
"gen-typings": "yarn run tsm app/javascript/**/*.sass",
|
|
110
|
+
"watch-typings": "yarn run tsm app/javascript/**/*.sass -w"
|
|
111
|
+
},
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
You can generate the typings for the stylesheet by running the command `yarn gen-typings` when you've finished writing CSS, or run `yarn watch-typings` to have it automatically generate them as you go.
|
|
115
|
+
|
|
63
116
|
|
|
64
117
|
## Link styles from your Rails views
|
|
65
118
|
|