Vite Stylelint showing scss errors only after manual reload or .vue file change

Question

I have a pretty vanilla Vite+Vue3+Eslint+Stylelint project running at the moment to see how the setup works.

I've got everything working properly now except for the stylelinter:

Whenever I make an inline scss error and save it; nothing happens. No error is shown in my terminal or my server HMR overlay. Only after I refresh my browser manually the error is shown. When I fix the error HMR kicks back in and reloads my page without any issue.

Making another change in my .vue file seems to do the trick aswell to fire off the error belatedly.

Since it's pretty annoying to manually refresh or to make another change in my vue file I'd like stylelint to just show me my error right off the bat.

This is my .vue file with the faulty 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>

Obviously #avc is incorrect; so it shows me the warning(after refresh or other change):

Internal server error: Unexpected invalid hex color "#avc" (color-no-invalid-hex)

My vite.config.js (Located in root, I've tried turning off other plugins etc one-by-one without results)

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)),
    },
  },
})

And my stylelint.config.js (located in 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
  ],
};

And (for what it's worth) my package.json:

{
  "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"
  }
}

As an aside: Importing .scss files in my .vue file or just having existing .scss files aren't even detected by my config at all (although it does function and compile properly)

Vite Stylelint showing scss errors only after manual reload or .vue file change

0 Answers0