Bundled production-ready CSS filename in manifest.json

[leoplct]

When I run vue-cli-service build --mode production --watch

it creates a css with a random number at the end

dist/css/style.d68ba393.js

how can I add a path to this file in manifest?

"content_scripts": [{
  "matches": ["https://www.google.com"], 
      "js": ["js/content-script.js"],
      "css": ["style.css"],
      "run_at": "document_end"
}]

[lanbin45]

When I run vue-cli-service build --mode production --watch

it creates a css with a random number at the end

dist/css/style.d68ba393.js

how can I add a path to this file in manifest?

"content_scripts": [{
  "matches": ["https://www.google.com"], 
      "js": ["js/content-script.js"],
      "css": ["style.css"],
      "run_at": "document_end"
}]

Same to me! Did you find out some solutions? If any solutions,Please update to me, thanks

[lanbin45]

When I run vue-cli-service build --mode production --watch

it creates a css with a random number at the end

dist/css/style.d68ba393.js

how can I add a path to this file in manifest?

"content_scripts": [{
  "matches": ["https://www.google.com"], 
      "js": ["js/content-script.js"],
      "css": ["style.css"],
      "run_at": "document_end"
}]

Oh, I've found solutions in a closed issue here #87 . The solution is in this link and it works for me. Just FYI.

[leoplct]

//vue.config.js

module.exports = {
  filenameHashing: false,
}

Thank you. It worked

[Gujionsen]

Hi,

I added css in manifest's content-script bloc, but could not find how to add css in vue.config.js. Sorry for writing in a closed issue.

"content_scripts": [ { "js": ["js/content-script.js"], "css" : ["css/content-style.css"],

[Gujionsen]

@leoplct could you share your vue.config.js css part?

[leoplct]

module.exports = {
  filenameHashing: false,
  pages: {
    popup: {
      template: 'public/browser-extension.html',
      entry: './src/popup/main.js',
      title: 'Popup'
    },
    options: {
      template: 'public/browser-extension.html',
      entry: './src/options/main.js',
      title: 'Options'
    },
  },
  pluginOptions: {
    browserExtension: {
      components: {
        background: true,
        contentScripts: true
      },

      componentOptions: {
        contentScripts: {
          entries: {
            "page": 'src/content-scripts/page.js',
            "search-results": 'src/content-scripts/search-results.js',
          },
        },
      },

      manifestTransformer: (manifest) => {
        delete manifest.content_security_policy
        // manifest.content_security_policy = {
        //  "extension_pages": manifest.content_security_policy.replace('script-src', 'script-src-elem http://localhost:8098')
        // }
        return manifest;
      }

    }
  },
  configureWebpack: {
    devtool: "true",
  }
}

[Gujionsen]

@leoplct Thanks a lot! Actually I hoped to see something about css loading. I'm still looking for the way to use custom css file for the content part, how it can go to dist folder and after final build! Some help will be appreciated!

[leoplct]

Have you tried runvue-cli-service build?

[Gujionsen]

Hm.. I was trying with vue-cli-service build --mode development --watch, after production build I found it. Thank you again!