仅在手动重新加载或.vue文件更改后显示SCSS错误

Question

我有一个漂亮的Vanilla Vite+Vue3+Eslint+Stylelint Project目前运行，以查看设置的工作原理。

除了Stylelinter之外，我现在有正常工作的所有功能：

每当我造成Inline SCSS错误并保存时；什么都没有发生。我的终端或服务器HMR覆盖层没有显示错误。 只有在我刷新浏览器手动之后，显示了错误。当我解决错误时，HMR会重新启动并重新加载我的页面，没有任何问题。

在我的.vue文件中做出另一个更改似乎可以做到这一点，因为他们迟来地解开了错误。

由于手动刷新或在我的vue文件中进行另一个更改是非常烦人的，所以我想stylelint立即向我展示我的错误。

这是我的.vue文件，带有错误的scss：

<template>
  <div class="glorp">
    <h1>Home index</h1>
  </div>
</template>
<script>
export default {
  name: 'HomeIndex',
};
</script>
<style lang="scss" scoped>
.glorp {
  background: #avc;
}
</style>

显然#avc不正确；因此，它向我显示了警告（刷新或其他更改后）：

内部服务器错误：意外无效的十六进制颜色“ #avc”（color-no-invalid-hex）

我的vite.config.js（位于在root中，我尝试关闭其他插件等，而没有结果）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint';
import StylelintPlugin from 'vite-plugin-stylelint';
import babel from 'vite-plugin-babel';
import { fileURLToPath } from "url";

const esLintConfig = eslintPlugin({
  fix: true,
  cache: false // when cache is true modules are only linted once on startup and when fixed it won't check for errors in the entire file again
});

const styleLintConfig = StylelintPlugin({
  fix: true,
  cache: false
});

export default defineConfig({
  server: {
    host: true
  },
  plugins: [
    styleLintConfig,
    esLintConfig,
    babel(),
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
})

和我的stylelint.config.js（位于root）

module.exports = {
  extends: [
    'stylelint-config-standard-scss', // Load the standard stylelint configuration
    'stylelint-config-recommended-vue',
    'stylelint-config-rational-order',
  ],
  plugins: [
    'stylelint-declaration-block-no-ignored-properties', // This plugin checks for ignored properties and throws error if so
  ],
};

和（对于值得的）我的软件包

{
  "name": "piniata",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint:css": "stylelint ./**/*.{vue,scss} --fix",
    "lint:js": "cross-env NODE_ENV=production eslint src --ext .js --ext .vue --fix"
  },
  "dependencies": {
    "vue": "^3.2.25",
    "vue-router": "^4.0.15"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "@vue/eslint-config-airbnb": "^6.0.0",
    "cross-env": "^7.0.3",
    "eslint-plugin-vue": "^8.7.1",
    "sass": "^1.51.0",
    "sass-loader": "^12.6.0",
    "stylelint": "^14.8.2",
    "stylelint-config-rational-order": "^0.1.2",
    "stylelint-config-recommended-vue": "^1.4.0",
    "stylelint-config-standard-scss": "^3.0.0",
    "stylelint-declaration-block-no-ignored-properties": "^2.5.0",
    "vite": "^2.9.9",
    "vite-plugin-babel": "^1.0.0",
    "vite-plugin-eslint": "^1.6.0",
    "vite-plugin-stylelint": "^2.2.2"
  }
}

。我的.vue文件中的scss文件或仅在我的配置上都没有检测到现有的.scss文件（尽管它确实可以正常运行并正确地编译）