Skip to content

Not showing errors when running dev mode #103

@orsileonel

Description

@orsileonel

Hello, thank you for this great module!

I don't know if this is the correct place to ask for this, but I have the following issue which was working before.

Everything is working correctly regarding the configuration of my stylelint, it is showing the errors based on my rules when running yarn lint:style command which basically executes stylelint \"**/*.{vue,html,css,pcss,scss,sass}\":

Example:
image

It also shows me the errors in VSCode:
image

Now the issue comes when I run yarn dev, it executes the webpage without displaying any errors, but if I remove the lang="postcss" from the <style> it does display the window with the errors (although it does only with the .vue files, not the ones in the .pcss ones):

image

package.json

"devDependencies": {
    "@babel/eslint-parser": "^7.23.3",
    "@nuxt/devtools": "latest",
    "@nuxtjs/eslint-config": "^12.0.0",
    "@nuxtjs/eslint-module": "^4.1.0",
    "@nuxtjs/stylelint-module": "^5.1.0",
    "eslint": "^8.53.0",
    "eslint-plugin-nuxt": "^4.0.0",
    "eslint-plugin-vue": "^9.18.1",
    "eslint-plugin-vuejs-accessibility": "^2.2.0",
    "nuxt": "^3.8.1",
    "postcss-html": "^1.5.0",
    "postcss-import": "^15.1.0",
    "postcss-nested": "^6.0.1",
    "postcss-scss": "^4.0.9",
    "stylelint": "^15.11.0",
    "stylelint-config-recommended-vue": "^1.5.0",
    "stylelint-config-standard": "^34.0.0",
    "vite-plugin-eslint": "^1.8.1",
    "vue": "^3.3.8",
    "vue-router": "^4.2.5"
  }

nuxt.config.js

import eslintPlugin from 'vite-plugin-eslint'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: {
    enabled: true
  },
  vite: {
    plugins: [
      eslintPlugin({
        failOnWarning: true
      })
    ]
  },
  modules: ['@nuxtjs/stylelint-module'],
  css: ['@/assets/css/main.pcss'],
  stylelint: {
    lintOnStart: false,
    failOnError: false,
    failOnWarning: false
  },
  postcss: {
    plugins: {
      'postcss-import': true,
      'postcss-nested': {}
    }
  }
})

.stylelintrc.cjs

module.exports = {
  extends: ["stylelint-config-recommended-vue"],
  overrides: [
    {
      files: ["*.{vue,html}", "**/*.{vue,html}"],
      customSyntax: "postcss-html",
    },
    {
      files: ["*.pcss", "**/*.pcss"],
      customSyntax: "postcss-scss",
    },
  ],
  customSyntax: "postcss-html",
  rules: {
    ...
  },
};

Is there any way to fix this so that when I use development mode it displays the errors like when I execute the linter manually?

Thank you!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions