Wednesday 2 December 2020

Extract processed CSS as property on VueJS component for run time

Is it possible to get the css for a vue js component and attach it as a string to a component when building a library for use at run time?

vue-cli-service build --mode production --target lib --name components src/index.ts

I currently achieve this for some custom js using a custom block

vue.config

...
 rules: [
      {
        resourceQuery: /blockType=client-script/,
        use: './client-script-block',
      },
   ],
},
...

client-script-block.js

module.exports = async function () {

  return `export default function (Component) {
      Component.options.__client_script = ${JSON.stringify(this.resourcePath)};
    }`;
};

Which then exposed the string in the vue app that uses the library.

But achieving the same thing with CSS doesnt seem to play ball.

any ideas?



from Extract processed CSS as property on VueJS component for run time

No comments:

Post a Comment