How to add localIdentName to webpack config on a vue project

I am trying to get localIndentName working on both development and production environments on my vue app (using vuetify UI) but nothing I have tried is working. I am using webpack 4. Below is my vue.config.js

module.exports = {
  pwa: {
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      swSrc: './src/sw.js',
      swDest: 'service-worker.js',
    },
    chainWebpack: config => {
      if (process.env.NODE_ENV === 'production') {
        // mutate config for production...
      } else {
        config.module
        .rule('css')
        .use('scss-loader')
        .tap(options => {
          options.modules = true
          options.importLoaders = 1,
          options.localIdentName = '[sha1:hash:hex:4]'
          return options
        })
      }
    },
    css: {
      loaderOptions: {
        sass: {
          options: {
            modules: true,
            importLoaders: 1,
            localIdentName: '[sha1:hash:hex:4]'
          }
        }
      }
    },
    rules: [
      // ... other rules omitted
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'scss-loader',
            options: {
              // enable CSS Modules
              modules: true,
              // customize generated class names
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]

  }
};

Any ideas on how to get this working in the vue.config.js? The webpack docs are pretty complicated but i have been through them.