vue.js 禁用外部主题文件生成的Dart SASS警告

m4pnthwp  于 2023-03-24  发布在  Vue.js
关注(0)|答案(5)|浏览(233)

我有一个第三方SCSS文件,我在我的项目中包括,Dart SASS显示一长串的警告作为结果。我如何禁用第三方包括的警告?
我在Dart SCSS中使用Vue。Dart有一个quietDeps选项,但我不确定我是否正确地使用了它。

// _common.scss
// Line below causes warnings to be displayed.
@import "~@progress/kendo-theme-default/dist/all";
// ...
// Vue.config.js
module.exports = {
  // ...
  css: {
    loaderOptions: {
      sass: {
        prependData: '@import "~@/styles/common";',
        sassOptions: {
          quietDeps: true
        }
      }
    }
  }
}
hm2xizp9

hm2xizp91#

参见以下问题:https://github.com/webpack-contrib/sass-loader/issues/954https://github.com/sass/sass/issues/3065
quietDeps选项尚未暴露给Node.js API。
在此期间,您可以降级到sass 1.32,而无需太多更改。
编辑:它现在在sass 1.35.1中可用。

z4iuyo4d

z4iuyo4d2#

对于任何人谁寻找安可配置

Encore.enableSassLoader((options) => {
  options.sassOptions = {
    quietDeps: true, // disable warning msg
  }
})
xfyts7mz

xfyts7mz3#

对于NuxtJS,将其添加到nuxt.config.js

build: {
    loaders: {
      scss: {
        sassOptions: {
          quietDeps: true
        }
      }
    }
  }
2wnc66cl

2wnc66cl4#

对于任何使用vue + quasar的人来说,对我有用的是调整配置如下:

const path = require("path");

module.exports = {
  outputDir: path.resolve(__dirname, "../API/ClientApp/dist"),
  pluginOptions: {
    quasar: {
      importStrategy: "kebab",
      rtlSupport: false,
    },
  },
  css: {
    loaderOptions: {
      sass: {
        sassOptions: {
          quietDeps: true
        }
      }
    }
  },
  transpileDependencies: ["quasar"],
};
kkbh8khc

kkbh8khc5#

对于Nuxt v3和Vite:

// nuxt.config.ts
export default defineNuxtConfig({

    vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    ...silenceSomeSassDeprecationWarnings,
                },
                sass: {
                    ...silenceSomeSassDeprecationWarnings,
                },
            },
        },
    },
});

const silenceSomeSassDeprecationWarnings = {
  verbose: true,
  logger: {
    warn(message, options) {
      const { stderr } = process;
      const span = options.span ?? undefined;
      const stack = (options.stack === 'null' ? undefined : options.stack) ?? undefined;

      if (options.deprecation) {
        if (message.startsWith('Using / for division outside of calc() is deprecated')) {
          // silences above deprecation warning
          return;
        }
        stderr.write('DEPRECATION ');
      }
      stderr.write(`WARNING: ${message}\n`);

      if (span !== undefined) {
        // output the snippet that is causing this warning
        stderr.write(`\n"${span.text}"\n`);
      }

      if (stack !== undefined) {
        // indent each line of the stack
        stderr.write(`    ${stack.toString().trimEnd().replace(/\n/gm, '\n    ')}\n`);
      }

      stderr.write('\n');
    }
  }
};

图片来源:https://github.com/quasarframework/quasar/pull/12034#issuecomment-1021503176
如果您碰巧使用了Nuxt-Quasar,则here中给出了关于此问题和解决方案的更详细的说明

相关问题