CODEWITHSUNDEEP
vue.jswebpack
Dazed
Dazed

Reputation: 1259

Webpack control of output css file names

I'm trying to control the filenaming of files produced from a Vue app with Webpack.

The environment where I want to host the built app doesn't like filenames with '.' (don't ask).

I have been able via get js files to comply with a 'hyphen' naming scheme by using output.filename in vue.config.js configureWebpack entry. But css files are not renamed.

As I am loading the two bulk packed files rather than chunks I can obviously manually rename the single css file. However when I run it I get an error

Error: Loading CSS chunk error failed.
(/my-path/resources/css/error.d0f9a634.css)

I'm hoping I can force all css files (including the error one) to be renamed by the build process.

My vue.config.js

module.exports = {
  outputDir: path.resolve(__dirname, 'dist'),
  publicPath: "/my-path/resources",
  configureWebpack: {
    optimization: {
      splitChunks: false
    },
      output: {
        filename: "[name]-js",
        chunkFilename: "[name]-chunk-js",
        // get cssFilename() {
        //   return "[name]-css";
        // }
    },
    resolve: {
      alias: {
        'vue$': path.resolve('./node_modules/vue/dist/vue.common.js'),
      },
    },
  },
  // https://cli.vuejs.org/config/#productionsourcemap
  productionSourceMap: false,
  
  // https://cli.vuejs.org/config/#css-extract
  css: {
    extract: { ignoreOrder: true },
    loaderOptions: {
      sass: {
        prependData: '@import \'~@/assets/scss/vuetify/variables\''
      },
      scss: {
        prependData: '@import \'~@/assets/scss/vuetify/variables\';'
      }
    }
  },
  // ...
}

I have started to look at MiniCssExtractPlugin but not sure if that is the right direction to look. Any help appreciated.

Upvotes: 4

Views: 5875

Answers (1)

Dazed
Dazed

Reputation: 1259

I found a working solution for this via the css.extract element in vue.config.js.

 configureWebpack: {
    optimization: {
      splitChunks: false
    },
    output: {
       filename: "js/[name]-js",
       chunkFilename: "js/[name]-chunk-js",
    },
    ...
  },

  // https://cli.vuejs.org/config/#css-extract
  css: {
    extract: { 
      ignoreOrder: true,
      filename: 'css/[name]-css',
      chunkFilename: 'css/[name]-chunk-css', 
    },
    loaderOptions: {
      sass: {
        prependData: '@import \'~@/assets/scss/vuetify/variables\''
      },
      scss: {
        prependData: '@import \'~@/assets/scss/vuetify/variables\';'
      }
    }
  },
  ...

Which as the documentation link for css.extract says

Instead of a true, you can also pass an object of options for the mini-css-extract-plugin if you want to further configure what this plugin does exactly

and is covered by the webpack mini-css-extract-plugin documentation

Upvotes: 3

Related Questions