diff --git a/README.md b/README.md index 56a69080..86d74dd6 100644 --- a/README.md +++ b/README.md @@ -670,7 +670,9 @@ development: port: 3035 ``` -If you have `hmr` turned to true, then the `stylesheet_pack_tag` generates no output, as you will want to configure your styles to be inlined in your JavaScript for hot reloading. During production and testing, the `stylesheet_pack_tag` will create the appropriate HTML tags. +If you have `hmr` turned to true and `inline_styles` is not false, then the `stylesheet_pack_tag` generates no output, as you will want to configure your styles to be inlined in your JavaScript for hot reloading. During production and testing, the `stylesheet_pack_tag` will create the appropriate HTML tags. + +If you want to have HMR and separate link tags, set `hmr: true` and `inline_styles: false`. This will cause styles to be extracted and reloaded with the `mini-css-extract-plugin` loader. Note that in this scenario, you do not need to include style-loader in your project dependencies. ### Additional paths diff --git a/lib/webpacker/dev_server.rb b/lib/webpacker/dev_server.rb index d9dae344..2482cd47 100644 --- a/lib/webpacker/dev_server.rb +++ b/lib/webpacker/dev_server.rb @@ -55,6 +55,15 @@ def hmr? fetch(:hmr) end + def inline_css? + case fetch(:inline_css) + when false, "false" + false + else + true + end + end + def env_prefix config.dev_server.fetch(:env_prefix, DEFAULT_ENV_PREFIX) end diff --git a/lib/webpacker/instance.rb b/lib/webpacker/instance.rb index 9d42e687..39ef6d05 100644 --- a/lib/webpacker/instance.rb +++ b/lib/webpacker/instance.rb @@ -36,6 +36,6 @@ def commands end def inlining_css? - dev_server.hmr? && dev_server.running? + dev_server.inline_css? && dev_server.hmr? && dev_server.running? end end diff --git a/package/inliningCss.js b/package/inliningCss.js index e1036653..7084d5e8 100644 --- a/package/inliningCss.js +++ b/package/inliningCss.js @@ -2,6 +2,6 @@ const { runningWebpackDevServer } = require('./env') const devServer = require('./dev_server') // This logic is tied to lib/webpacker/instance.rb -const inliningCss = runningWebpackDevServer && devServer.hmr +const inliningCss = runningWebpackDevServer && devServer.hmr && devServer.inlineCss !== false module.exports = inliningCss diff --git a/test/webpacker_test.rb b/test/webpacker_test.rb index 082eb1b9..a20a95bc 100644 --- a/test/webpacker_test.rb +++ b/test/webpacker_test.rb @@ -23,11 +23,26 @@ def dev_server.pretty?; false; end def dev_server.https?; true; end def dev_server.hmr?; true; end def dev_server.running?; true; end + def dev_server.inline_css?; true; end Webpacker.instance.stub(:dev_server, dev_server) do assert Webpacker.inlining_css? end end + def test_explicit_no_inline_css_with_hmr + dev_server = Webpacker::DevServer.new({}) + def dev_server.host; "localhost"; end + def dev_server.port; "3035"; end + def dev_server.pretty?; false; end + def dev_server.https?; true; end + def dev_server.hmr?; true; end + def dev_server.running?; true; end + def dev_server.inline_css?; false; end + Webpacker.instance.stub(:dev_server, dev_server) do + assert !Webpacker.inlining_css? + end + end + def test_app_autoload_paths_cleanup assert_empty $test_app_autoload_paths_in_initializer end