3

I'm new using Nuxt js therefore same with nuxt.config.js file . I'm trying to get how can I set stylelint file on my Nuxt js project and run it everytime I press save, so the stylelint rules will be apply it. I mean same behaviour like with .eslintrc but with .stylelintrc rules. I already installed stylelint stylelint-processor-html stylelint-config-standard packages and set the package.json scripts object with "lint:css": "stylelint 'src/**/*.vue'" so if I run yarn/npm run lint_css It works. But I want to automate it everytime I press save

nuxt.config.js file

module.exports = {
      head: {
        title: 'my-project',
        meta: [
          {charset: 'utf-8'},
          {name: 'viewport', content: 'width=device-width, initial-scale=1'},
          {hid: 'description', name: 'description', content: 'Nuxt.js project'}
        ],
        link: [{rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}],
      },
      loading: {color: '#3B8070'},

      plugins: [
      ],

      styleResources: {
        scss: [
          //
        ]
      },
      build: {
        extend(config, {isDev, isClient}) {
          if (isDev && isClient) {
            config.module.rules.push({
              enforce: 'pre',
              test: /\.(js|vue)$/,
              loader: 'eslint-loader',
              exclude: /(node_modules)/
            })
          }
        }
      },
      modules: ['']
    }
Kaiser91
  • 333
  • 6
  • 17

1 Answers1

4

You can install the stylelint-webpack-plugin webpack plugin:

npm install stylelint-webpack-plugin --save-dev

Note: You also need to install stylelint from npm, if you haven't already:

npm install stylelint --save-dev

Then you have to update the build section on your nuxt.config.js

const StyleLintPlugin = require('stylelint-webpack-plugin');

module.exports = async function() {

      // ...

      build: {
        extend(config, {isDev, isClient}) {

          // ...

          // Stylelint
          config.plugins.push(
            new StyleLintPlugin({
              syntax: 'scss' // eg. with options if you need SCSS ;-)
            })
          )
      },
mhrabiee
  • 805
  • 10
  • 23
Nicolas Pennec
  • 7,533
  • 29
  • 43
  • In addition to this answer, it's unlikely you'll need to use `stylelint-processor-html ` in your stylelint configuration object as `.vue` files are now supported out-of-the-box in the stylelint. – jeddy3 Mar 05 '19 at 21:19