[v1.*] How to load css files as raw text?

[hailwood]

Using version 0.* we were able to do something like

import styleBody from '!!raw-loader!./injectableStyles.css';

And we would end up with a css string. In the 1.* versions this no longer works - the webpack docs say to add the following so we can do import styleBody from './injectableStyles.css?raw';

module: {
  rules: [
    // ...
    {
      resouceQuery: /raw/
      type: 'asset/source'
    }
  ]
},

Which is easily enough done with Encore.addRule

The issue comes in that the other loaders are also kicking in, webpacks solution to this is to on the other rules tell them to not apply if that resource query exists - I.e. resourceQuery: /^(?!raw$).*/,

Unfortunately this means altering the existing rules which encore is not keen on us doing.

So, what is the recommended approach here? Or could we have the rules uploaded so they all include that negative look ahead as I imagine this would be a relatively common request?

[weaverryan]

Hey @hailwood!

the webpack docs say to add the following so we can do import styleBody from './injectableStyles.css?raw';

Can you point me to the Webpack docs that mention this? It's turned out to be a difficult thing to Google :p.

So, what is the recommended approach here? Or could we have the rules uploaded so they all include that negative look ahead as I imagine this would be a relatively common request?

Assuming this ?raw is an official approach, we could definitely consider adding it to our rules to not process when that is there. But I'd need to learn more about that ?raw thing first.

Cheers!

[hailwood]

Hi @weaverryan

Sure thing, it's under the asset modules docs :)

https://webpack.js.org/guides/asset-modules/#replacing-inline-loader-syntax

In particular this part is the issue here https://webpack.js.org/guides/asset-modules/#replacing-inline-loader-syntax:~:text=and%20if%20you'd%20like%20to%20exclude,other%20loaders%2C%20use%20a%20negative%20lookahead%3A

[weaverryan]

Sure thing, it's under the asset modules docs :)

Thank you! I don't know why that was so hard for me to find!

So raw isn’t a feature... this is just a strategy where you add ?raw, then map that to asset/source and also prevent other loaders from processing things with raw.

So.... I guess we would mess with the config around here (just focusing on CSS files for a moment) - https://github.com/symfony/webpack-encore/blob/main/lib/config-generator.js#L310-L325 - to do the negative look ahead. That's really unfortunate to have to hack that in there... I’m not sure how I feel about it. But I can’t (yet) think of a better way than to hack in logic for “raw” so people can use it...

But anyways, let's see if it works first! Could you try hacking the loaders into your config (or directly into Encore in your app) to see if it works out the way you want it to?

Thanks!

[stfullstack]

Could you try hacking the loaders into your config (or directly into Encore in your app) to see if it works out the way you want it to?

Can you provide an example of how to do that, I would like to implement this in my code also.

[hailwood]

It's actually nice and simple

Encore.addRule({
  resourceQuery: /raw/,
  type: 'asset/source',
});

[stfullstack]

Thanks. I think my config might have something extra going on as your solution was what I also though was the case:

Config:

Encore.addRule({
  resourceQuery: /raw/,
  type: 'asset/source',
});

Code:

import appCss from '../../../css/app.css?raw'
console.log(appCss)

Console output:

// extracted by mini-css-extract-plugin
export {};
if(module.hot) {
  var cssReload = require("/path/to/project/node_modules/mini-css-extract-plugin/dist/hmr/hotModuleReplacement.js")(module.id, {"locals":false});
  module.hot.dispose(cssReload);
  module.hot.accept(undefined, cssReload);
}

Been scratching my head for a few hours now trying to figure out how to fix this. Any suggestions?