CODEWITHSUNDEEP
vuetify.jsvue-cliwebpack-4
Mark Gibbons
Mark Gibbons

Reputation: 581

How to exclude scss / sass files from a module import

I'm importing a specific Vuetify module (v-autocomplete), but don't want to import the styling as it conflicts with the existing styling. How can I configure my vue.config.js to exclude all styles imported by vuetify?

I have tried this:

config.module.rules.unshift({
  test: /vuetify.*.s(c|a)ss$/,
  use: {
    loader: 'null-loader',
  },
});

Which seems to work on the devServer, however when building for production it does not honour this rule. I've run vue inspect --mode production to make sure that the rule is imported correctly.

Upvotes: 1

Views: 618

Answers (1)

Mark Gibbons
Mark Gibbons

Reputation: 581

In addition to adding the null-loader rule:

config.module.rules.unshift({
  test: /vuetify.*.s(c|a)ss$/,
  loader: 'null-loader',
});

You also need to add an exclude to the sass and scss loaders

vueConfig.chainWebpack.module.rule('scss').exclude.add(/vuetify.*/);
vueConfig.chainWebpack.module.rule('sass').exclude.add(/vuetify.*/);

Upvotes: 1

Related Questions