在 Nuxt js 项目中配置 stylelint 文件

Posted 2023-03-10

【中文标题】在 Nuxt js 项目中配置 stylelint 文件

【英文标题】：config stylelint file in Nuxt js project

【发布时间】：2019-07-24 08:53:39

【问题描述】：

我是使用 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: ['']
    

【参考方案1】：

你可以安装stylelint-webpack-plugin webpack 插件：

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

注意：如果您还没有安装 stylelint，还需要从 npm 安装：

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

【讨论】：

除了这个答案之外，您不太可能需要在 stylelint 配置对象中使用 stylelint-processor-html ，因为 stylelint 现在支持开箱即用的 .vue 文件。