Prevent Vuetify styles compilation

[Maxim-Mazurok]

I want to avoid compiling sass/scss styles when building vuetify app.

I've tried to use solution from here: https://github.com/vuetifyjs/vuetify-loader/issues/201#issuecomment-915892697 Like so:

module.exports = {
  chainWebpack(config) {
    config.module
      .rule("bla-bla")
      .enforce("pre")
      .test(/\.(css|scss|sass)$/)
      .use("null-loader")
      .loader("null-loader")
      .end();
  },
};

But I can still see in the build log that vuetify styles are being compiled:

56 │ $container-padding-x: $grid-gutter / 2 !default;
   │                       ^^^^^^^^^^^^^^^^
   ╵
    node_modules/vuetify/src/styles/settings/_variables.scss 56:23  @import
    node_modules/vuetify/src/styles/settings/_index.sass 1:9        @import
    node_modules/vuetify/src/styles/styles.sass 2:9                 @import
    node_modules/vuetify/src/styles/main.sass 2:9                   root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Even though all resulting CSS files are 0kb:

dist/css/Bla.e7a516a5.css                  0.00 KiB
dist/css/BlaBla.8b5fefc0.css               0.00 KiB
dist/css/BlaBlaBla.8b5fefc0.css            0.00 KiB
dist/css/app.0e433876.css                  0.00 KiB
dist/css/chunk-vendors.a1922ca9.css        0.00 KiB

[apertureless]

Any updates on this? I am also looking for a way to disable the style loading.

[Maxim-Mazurok]

It's already in v2 of the loader, which is only for v3 of vue and vuetify as far as I understand.

Adding this to my vue.config.js:

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          enforce: "pre",
          test: /\.s[ac]ss$/,
          include: /node_modules[/\\]vuetify[/\\]/,
          issuer: /node_modules[/\\]vuetify[/\\]/,
          loader: "null-loader",
        },
      ],
    },
  },
};

helped to make build about 3 times faster. But I still can see vuetify styles building...

[apertureless]

Ah that worked for me.

[Maxim-Mazurok]

Update: This seems to work better (gets rid of build warnings, etc):

// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-var-requires
const Config = require("webpack-chain"); // for auto-complete

module.exports = {
  /** @param { Config } config */
  chainWebpack: (config) => {
    // see https://github.com/vuetifyjs/vuetify-loader/issues/209
    // replace with `styles: 'none'` config in Vuetify v3
    ["sass", "scss"].map((lang) =>
      ["vue", "normal", "vue-modules", "normal-modules"].map((name) => {
        config.module.rule(lang).oneOf(name).use("sass-loader").loader("null-loader");
      })
    );

    // uncomment this to debug webpack config
    // console.log(config.toString()); process.exit();
  },
};

[ricardo17coelho]

Hi @apertureless and @Maxim-Mazurok

I implement an similiar solution on my component lib. Vuetify styles are excluded from the build.

But when i use some component from my custom vuetify lib, the vuetify styles are not imported in the main project. Only if use the same component somewhere.

U have some idea how i can solve this ?

[KaelWD]

No plans to add this to the v2 plugin.