Laravel-mix: Mix seems to not use style-loader to inject css

[MarlBurroW]

• Laravel Mix Version: 1.4.3
• Node Version: v8.1.2
• NPM Version: 5.0.3
• OS: Linux/Ubuntu 16.04

Description:

Hello, in my app I've 2 style sources:

• Vue styles (in the style tag of my .vue components)
• Styles I call "Common styles" (a scss entry point in sass/app.scss).

I want to have a live/hot reload for both vue styles and common styles in development mode. Currently it works for vue styles. All my vue styles are injected in a style tag in the header and the HMR update the change without refresh the page (with the vue-style-loader I guess).

But the "common" styles are not injected when I save a change, I've to reload the page first. The css is just extracted from the bundle to the file "css/app.css" and seems to be not handled by the style-loader, it's fine for a production flow, but for development I need this css injected in my page with the style-loader to have a better development experience.

Is there a way to enable style-loader with the mix API ? or maybe I misunderstood something ?

I know I can use the browserSync option, but mix use webpackDevServer and can do this job, so I don't want to use it.

Steps to reproduce

I didn't change anything in "webpack.mix.js" so I have the default mix configuration.

Thanks

[MarlBurroW]

I found this old comment from @JeffreyWay (https://github.com/JeffreyWay/laravel-mix/issues/92#issuecomment-273558018)

It won't work right now for regular Sass files. The HMR feature is specifically for Vue and .vue components.

Does it works today ?

[MarlBurroW]

If someone interested, here is my hack/patch to make it works :

// Replace src/builder/webpack-rules.js line 186

rules.push({
  test: preprocessor.src.path(),
  use: extractPlugin.extract({ fallback: 'style-loader', use: loaders })
});

// by

rules.push({
  test: preprocessor.src.path(),
  use: Mix.isUsing('hmr') ? ['style-loader', ...loaders] : extractPlugin.extract({ fallback: 'style-loader', use: loaders })
});

It tells to webpack to use the style-loader instead of the extractTextPlugin when the HMR is enabled.
It's ugly but it does the job waiting this feature.

Note: If you have some css files generated by a previous non-hmr build, delete it to avoid conflict with the injected css. Of course you'll see a 404 error because of the missing css file, but your css will be hot reloaded now (only with npm run hot).

[MarlBurroW]

Same request here: #1320

[wyxos]

Do I understand right from Jeffrey's comment above that laravel-mix aims to support mainly Laravel/Vue and not stand alone projects?
My current use case is that I want to develop a prototype, and having to use laravel or vue-cli seems a bit too much for just mocking up ideas.
@JeffreyWay is there any possibility for the use case above that we have a parameter that allows to achieve disabling CSS extraction as illustrated on #1320?

[MarlBurroW]

What I understood:

The style-loader (the loader who inlines css in a style tag on change) is currently only available for vue files.
For regular scss files, compiled css is always extracted in a css file (prod & dev) and it seems there is no mix parameters to change this.
So currently the only way to do this is by editing the mix node module as you did.

What I guess:

I guess this feature is not implemented yet because it implies a lot of modification of laravel (the mix helper) to works properly.
Example:

// In the case of Injected css, the following line will trigger a 404
<link rel="stylesheet" href="{{ mix('style.css') }}">
// The mix helper must be aware of the mix configuration to know if the css is injected or not.

But i'm maybe wrong...

I agree with you, we need to be able to disable the css extraction to inject/inline the css in HMR mode.

[wyxos]

@MarlBurroW Thanks I was guessing the same after thinking a bit about a laravel use-case. For now I'll start working on a custom wrapper around webpack I guess for my current situation, but hoping at some point this can be done via laravel-mix.

[velisiska]

Thanks, @MarlBurroW for your temporary solution. Is there any update this issue?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[feryardiant]

Any update for this issue?

[domstubbs]

I don’t know what’s changed and when, but I do have Mix HMR working on some non-Vue, non-Laravel projects without any significant config overrides in place (mix.setResourceRoot seems to be needed for reliable asset loading). As mentioned above, you do need to disable the standard <link>CSS tag when HMR is active or you’ll run into conflicts.

[elliottregan]

So, I've been assuming HMR works, because it _kinda_ does. This has resulted in two things:

1. live-reloading doesn't always work if you are removing CSS properties. The outdated version of your styles don't get removed, so you can only add or modify properties before doing a hard refresh.
2. All stylesheets get loaded onto every page. If you have page-specific stylesheets, you'll end up with unintended style collisions.

Everything appears to work fine until you try doing something slightly off the rails, like having more than one stylesheet entrypoint. Are there any active issues related to this, or should I create a new one with more detail?