Learn Nuxt with a Collection of 100+ Tips!

stylelint
stylelint

Stylelint module for Nuxt. A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.

@nuxtjs/stylelint-module

npm versionnpm downloadsGithub Actions CICodecovLicense

Stylelint module for Nuxt.js

📖 Release Notes


Note: This branch is for Nuxt 3 or Nuxt Bridge compatible module. Checkout the nuxt2 branch for Nuxt 2 support.


Requirements

You need to ensure that you have stylelint installed:

With pnpm

pnpm add -D stylelint

Or, with yarn

yarn add -D stylelint

Or, with npm

npm install -D stylelint

Note: Currently, this module is compatible with the latest version 16 of stylelint only when using vite, support for webpack is not yet implemented (see https://github.com/webpack-contrib/stylelint-webpack-plugin/issues/342).

Setup

  1. Add @nuxtjs/stylelint-module dependency to your project

With pnpm

pnpm add -D @nuxtjs/stylelint-module

Or, with yarn

yarn add -D @nuxtjs/stylelint-module

Or, with npm

npm install -D @nuxtjs/stylelint-module
  1. Add @nuxtjs/stylelint-module to the modules section of nuxt.config.js
export default {
  modules: [
    // Simple usage
    '@nuxtjs/stylelint-module',

    // With options
    ['@nuxtjs/stylelint-module', { /* module options */ }]
  ]
}

Using top level options

export default {
  modules: [
    '@nuxtjs/stylelint-module'
  ],
  stylelint: {
    /* module options */
  }
}

Options

See stylelint's options for the complete list of options available. These options are passed through to the stylelint directly.

cache

  • Type: Boolean
  • Default: true

Note: The cache is enabled by default to decrease execution time.

include

  • Type: String|Array[String]
  • Default: [nuxt.options.srcDir.'/**/*.{css,scss,sass,less,styl,vue}']

Specify directories, files, or globs.

exclude

  • Type: Array[String]
  • Default: ['**/node_modules/**', 'virtual:', nuxt.options.buildDir]

Specify the files and/or directories to exclude.

stylelintPath

  • Type: String
  • Default: stylelint

Path to stylelint instance that will be used for linting.

formatter

  • Type: Function
  • Default: 'string'

Specify the formatter that you would like to use to format your results.

lintOnStart

  • Type: Boolean
  • Default: true

Check all matching files on project startup, too slow, turn on discreetly.

lintDirtyOnly

  • Type: Boolean
  • Default: true

Lint changed files only when running Stylelint except from buildStart hook, all specified files from include option will be linted when disabled.

emitWarning

  • Type: Boolean
  • Default: true

The warnings found will be printed.

emitError

  • Type: Boolean
  • Default: true

The errors found will be printed.

failOnWarning

  • Type: Boolean
  • Default: false

Will cause the module build to fail if there are any warnings, based on emitWarning.

failOnError

  • Type: Boolean
  • Default: true

Will cause the module build to fail if there are any errors, based on emitError.

Contributing

You can contribute to this module online with CodeSandBox:

Edit @nuxtjs/robots

Or locally:

  1. Clone this repository
  2. Install dependencies using pnpm install
  3. Prepare development server using pnpm dev:prepare
  4. Build module using pnpm build
  5. Launch playground using pnpm dev

License

MIT License

Copyright (c) Nuxt Modules