Can't resolve css url from webpack asset librarymodule

Question

I was able to output an assets library and many other libraries that work as remote federated modules and as deep import libraries in case I am not connecting to a remote or I am not using webpack in the consumer end.

The issue is now that all my assets exports a module, that either have the raw data as uri or the string that points to the right asset. Eg: the bird.svg is outputed to dust with it's hash plus the modules that resolves to the file bird-[hash].svg.

The above is great from javascript but not so much for css. Now I can't rewrite the url() to point to the right remote path which would be sg like:

//since I don't know when the assets will change names I can't refer to it directly. So I would need to first read the string from the bird.js module. Append the publicPath and then rewrite the url. 
.someClass {
  background-image: url('/assets/bird.js')
} 
//the above won't work for obvious reasons.

Só, the question is how can I solve this? Or is there any loader for this? I checked the resolve url loader but it does not seem to be what need.

Still not clear, what you are referring to, as the real-problem! — Deadpool
– Deadpool, Commented Dec 25, 2021 at 14:12
I have a federated library that has some assets I want to refer from the css. The problem is that the assets have it's modules that point to the hashed files,mostly images. Now I have a css that I need to get the url for that file but it can't resolve it with css-loader url rewrite, since it won't evaluate the js module to get the correct filename path to the hashed asset. — Ricardo Silva
– Ricardo Silva, Commented Dec 25, 2021 at 14:18

Ricardo Silva · Accepted Answer · 2022-01-06 04:15:08Z

Ok I resolved this issue, by passing additional data as variable to sass-loader. That way I can evaluate the actual name of the files, and put it as a sass map before and handle it from sass.

//I am using glob to return an object with all the assets.
//This can probably be automated better. That would be an easier way.
//But this way works for me in all 3 scenarios, node, browser and federated module.
//Also has caching ootb for the assets.
const assetsPaths = {
  ...glob.sync('../assets/dist/img/**.node.js').reduce(function (obj, el) {
    obj['img/' + path.parse(el).name] = '../../assets/dist/' + require(el).default;
    return obj
  }, {}), ...glob.sync('../assets/dist/fonts/**.node.js').reduce(function (obj, el) {
    obj['fonts/' + path.parse(el).name] = '../../assets/dist/' + require(el).default;
    return obj
  }, {})
};

//...
{
  loader: 'sass-loader',
  options: {
    additionalData: "$assets: '" + assetsMap + "';",
    sourceMap: true,
    sassOptions: {
      outputStyle: "compressed",
    },
  }
},
//...

you also need to disable url rewriting

{
  loader: 'css-loader',
  options: {
    url: false,
  }
},

then you can use assets map in your sass files:

@font-face { 
  font-family: 'Some Font';
  src: local('Some Font');
  src: url("#{map-get($assets, SomeFont)}");
}

You will need probably have your project setup sort like a mono repo and you also need to build those assets library with two bundles.

One for node so you can use the string path to your actual assets when bundling you sass/whatever. And another for normally loading it from the browser.

update:

Instead of doing all this I just used the manifest generated from 'webpack-manifest-plugin' to build the $assets map to be used in sass.

const assetsManifest = JSON.parse(fs.readFileSync('../assets/dist/manifest.json'));

const assetsMapFn = asset => `'${asset[0]}':'${asset[1]}'`;
  const assetsMap = `(
    ${Object.entries(assetsManifest).map(assetsMapFn).join(',')}
  ); `;

If anyone knows a better way to do this please reply or comment.

Collectives™ on Stack Overflow

Can't resolve css url from webpack asset librarymodule

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related