Nuxt js 프로젝트의 config stylelint 파일

Nuxt js 프로젝트의 config stylelint 파일

저는 Nuxt js를 처음 사용하므로 nuxt.config.js 파일과 동일합니다.Nuxt js 프로젝트에서 stylelint 파일을 설정하고 save를 누를 때마다 실행할 수 있도록 stylelint 규칙을 적용하려고 합니다..eslintrc와 같은 동작이지만 .stylelintrc 규칙도 마찬가지입니다.stylelint stylelint-processor-html stylelint-config-standard 패키지는 이미 설치해서 세팅했습니다.json 스크립트 오브젝트 "lint:css" : "stylelint 'src/*/*.vue" 입니다.따라서 yarn/npm을 실행하면 lint_css가 동작합니다.그러나 Save를 누를 때마다 자동화하고 싶다.

nuxt.config.config 파일

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: ['']
    }

stylelint-webpack-plugin Webpack 플러그인을 설치할 수 있습니다.

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

주의: npm부터 stylelint를 설치해야 합니다(아직 설치하지 않은 경우).

npm install stylelint --save-dev

그런 다음 의 빌드 섹션을 업데이트해야 합니다.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 ;-)
            })
          )
      },

언급URL : https://stackoverflow.com/questions/54959610/config-stylelint-file-in-nuxt-js-project