Vuetify loader with webpack 5

[dfabreguette]

Hi,
I've created a while back this issue #2239 concerning dart sass vs node-sass used in version 4 of webpacker rails gem.
I recently seen webpacker 5 upgrade so I gave it a shot, thinking the removal of node-sass would solve my problems but I'm still stuck with those errors :

  app/packs/entrypoints/my-custom-component.vue 2:8  root stylesheet
SassError: SassError: Expected newline.
  ╷
2 │ export {};

which points to <style lang="scss"></style> section in my components.

Here's my base.js file :

const { webpackConfig, merge } = require("@rails/webpacker");
const vueConfig = require("./rules/vue");
const vuetifyConfig = require("./rules/vuetify");

module.exports = merge(vueConfig, vuetifyConfig, webpackConfig);

Here's my vuetify.js rule file :

module.exports = {
  module: {
    rules: [
      {
        test: /\.s(c|a)ss$/,
        use: [
          "vue-style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            // Requires sass-loader@^7.0.0
            options: {
              implementation: require("sass"),
              indentedSyntax: true // optional
            },
            // Requires >= sass-loader@^8.0.0
            options: {
              implementation: require("sass"),
              sassOptions: {
                indentedSyntax: true // optional
              }
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [".scss", ".sass"]
  }
};

Here's my vue.js rule file :

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [new VueLoaderPlugin()],
    resolve: {
        extensions: ['.vue'],
    },
}

Did anyone have same issues ?

[mcmire]

Two things:

1. You seem to have two versions of options in your config, is that intentional?
2. Are you able to post what my-custom-component.vue is?

[iuri-gg]

you need to customize vuetify.js rule. the guide you copied it from gives you options for different versions ofs sass-loader. You should keep only one according to which version you are using. Offending lines (keep only one of the options):

            // Requires sass-loader@^7.0.0
            options: {
              implementation: require("sass"),
              indentedSyntax: true // optional
            },
            // Requires >= sass-loader@^8.0.0
            options: {
              implementation: require("sass"),
              sassOptions: {
                indentedSyntax: true // optional
              }
            }

[dfabreguette]

Thx I'll give a try when I'll get back on this project !