CSS not imported when building for production

[chadhutchins]

Hello, thank you for this great library!

We've been working in development for a while on our browser extension, and now we're ready to start using production builds.

Everything seems to be working perfectly except when we run a production build (yarn build) the CSS is not applied to our content script. I can see the css files are generated and placed within a /css folder, but it's like it is never referenced by the javascript.

One thing that may be a little different than the standard project is that we are adding a Vue app to the content script.

Is there something else we need to do?

[chadhutchins]

@adambullmer any thoughts on this? happy to support you and this project if we can get some help on this. Thanks!

[JamesDommisse]

I ran into the same issue, and was able to solve it by:

• Firstly ensuring that the generated css does not have a hash https://cli.vuejs.org/config/#filenamehashing

// vue.config.js
module.exports = {
    filenameHashing: false
    ...
}

• And then adding the generated css to the manifest:

  // src/manifest.json
  {
  ...
  "content_scripts": [
  {
    "matches": ["*://*/*"],
    "js": ["js/content-script.js"],
    "css": ["css/content-script.css"]
  }
  ],
  ...
  }

Hope that helps.

[chadhutchins]

Thanks @JamesDommisse will give this a look!

[mmohaveri]

@JamesDommisse I did as you said, now my development is broken as during development webpack does not create the css files, is there a way to tell webpack to edit the manifest on production?

[mmohaveri]

For other people that might end up here, you can add a manifestTransformer function to the plugins options and in that remove the css from contnet_scripts if it's running in development.

[michaelbukachi]

@mmohaveri Do you mind providing a snippet?

[stffndtz]

@michaelbukachi you should be able to do this (targeting the second entry of the content_scripts):

manifestTransformer: (manifest) => {
  if (process.env.NODE_ENV === "development") {
    manifest.content_scripts[1].css.pop();
  }
  return manifest;
},

[michaelbukachi]

@michaelbukachi you should be able to do this (targeting the second entry of the content_scripts):

manifestTransformer: (manifest) => {
  if (process.env.NODE_ENV === "development") {
    manifest.content_scripts[1].css.pop();
  }
  return manifest;
},

Thanks.