vue.js - 在 Nuxt js 项目中配置 stylelint 文件

Question

我是 Nuxt js 的新手，因此与 nuxt.config.js 文件相同。我正在尝试了解如何在我的 Nuxt js 项目上设置 stylelint 文件并在每次按保存时运行它，因此 stylelint 规则将应用它。我的意思是与 .eslintrc 相同的行为，但使用 .stylelintrc 规则。我已经安装了 stylelint stylelint-processor-html stylelint-config-standard 包并使用 "lint:css": "stylelint 'src/**/*. vue'" 所以如果我运行 yarn/npm run lint_css 就可以了。但我想在每次按保存时自动执行它

nuxt.config.js 文件

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

Answer 1

您可以安装 stylelint-webpack-plugin网页包插件:

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