在 Nuxt js 项目中配置 stylelint 文件

关键词：

【中文标题】在 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 文件。

我们如何在 Nuxt?Vuejs 项目中仅包含来自 lodash 的必需模块？

】我们如何在Nuxt?Vuejs项目中仅包含来自lodash的必需模块？【英文标题】：HowdoweincludeonlyrequiredmodulesfromlodashinaNuxt?VuejsProject?【发布时间】：2018-08-2409:16:05【问题描述】：我们已经构建了一个Nuxt/VueJS项目。Nuxt有自己的配置文件nuxt.... 查看详情

在现有 Nuxt.js 项目中使用 Express.js

】在现有Nuxt.js项目中使用Express.js【英文标题】：UseExpress.jsinanexistingNuxt.jsproject【发布时间】：2018-12-0407:50:29【问题描述】：我有一个使用Nuxt.js构建的项目，我想使用express来报告我的asyncData方法等的bugsnag错误。我将如何导入它... 查看详情

在 Nuxt.js 项目中使用 normalize.css 的最佳方式是啥？

】在Nuxt.js项目中使用normalize.css的最佳方式是啥？【英文标题】：Whatisthebestwayofusingnormalize.cssinNuxt.jsprojects?在Nuxt.js项目中使用normalize.css的最佳方式是什么？【发布时间】：2019-12-1414:44:25【问题描述】：我使用npxcreate-nuxt-app命令... 查看详情

nuxt项目内存溢出导致项目崩溃问题(代码片段)

nuxt项目内存溢出导致项目崩溃问题err：解决: 更改package.json 在script中配置--max-old-space-size=想配置的内存大小 example： "local":"node--max-old-space-size=4096node_modules/nuxt/bin/nuxt.js", 配置 查看详情

如何在 nuxt.js (vue.js) 中配置动态 og 标签？

】如何在nuxt.js(vue.js)中配置动态og标签？【英文标题】：HowdoIconfiguredynamicogtagsinnuxt.js(vue.js)?【发布时间】：2018-05-3112:59:18【问题描述】：我使用vueinitnuxt/expressmyprojectstart启动了nuxt应用程序。这是我的目录。page|-_project.vue|-project|-... 查看详情

nuxt.config.js文件

参考技术Anuxt.config.js文件用于组织Nuxt.js应用的个性化配置，以便覆盖默认配置。Nuxt.js允许你在自动生成的vendor.bundle.js文件中添加一些模块，以减少应用bundle的体积。如果你的应用依赖第三方模块，这个配置项是十分实用的。Nux... 查看详情

在 NUXT 项目中使用 Google Analytics 脚本

】在NUXT项目中使用GoogleAnalytics脚本【英文标题】：UsetheGoogleAnalyticsScriptinNUXTproject【发布时间】：2021-05-2120:07:13【问题描述】：我有一个使用Nuxt的网站，我想在上面放置GoogleAnalytics脚本。我已经下载了vue-gtag模块yarnaddvue-gtag我在p... 查看详情

linux部署nuxt.js项目(代码片段)

1.首先本地打包yarnbuild2.把.nuxt文件夹、static文件夹、nuxt.config.js、package.json和相关配置文件移到linux相关目录下3.在目录下执行yarn4. pm2start--name'tools' npm--rundev  查看详情

如何在 nuxt js 中使用 vuetify 作为插件？

...时间】：2020-04-2321:43:53【问题描述】：我需要在我的nuxtjs项目中使用vuetify作为插件。我试过包@nuxtjs/vuetify，但得到错误无法分配给对象“#”的只读属性“base”我已经从官方codesandbox在线游乐场在本地服务器和共享主机上安装了... 查看详情

将 Stylelint 与 Vue.js 集成

】将Stylelint与Vue.js集成【英文标题】：IntegratingStylelintwithVue.js【发布时间】：2019-11-3010:00:44【问题描述】：我正在尝试将stylelint集成到我新创建的Vue项目中。我认为这是使用StylelintWebpackPlugin的简单案例，但是当我运行yarnserve时... 查看详情

如何在nuxt.js中实现handsontable

...】：2020-06-2608:31:04【问题描述】：我正在尝试在我使用的项目上安装handsontablenpminstallhandsontable@handsontable/vue也许我需要创建一个插件？如何在现有的nuxt项目中使用handsontable？【问题讨论】：【参考方案 查看详情

Tabulator + Nuxt.js：如何在回调中使用 axios？

...间】：2020-01-1608:48:53【问题描述】：我尝试在我的Nuxt.js项目中添加Tabulator。我已经完成了下一个组件：<template><divref="table"></div></template&g 查看详情

pm2部署nuxt3.js项目并设置服务器重启时项目自动重启(代码片段)

前言众所周知，nuxt3.js是基于vue开发ssr,seo的项目比较好的框架，那么开发完成项目，如何部署nuxt项目也是比较重要的，接下来就记录一下我在开发中是如何部署的。我之前写过一篇vue和ssr+nuxt.js配置环境变量以... 查看详情

无法在我的 Nuxt 项目中使用“node”命令导入 ES 模块

】无法在我的Nuxt项目中使用“node”命令导入ES模块【英文标题】：CannotimportESmoduleswith"node"commandinmyNuxtproject【发布时间】：2021-06-1810:54:02【问题描述】：我的nuxt项目使用nuxt.config.js中定义的serverMiddleware作为服务器中间件... 查看详情

我可以在 nuxt.config.js 中访问 nuxt 上下文吗？

...问题描述】：我正在使用nuxt-i18n和@nuxtjs/auth，我想像这样配置auth.redirect选项来支持i18n：//nuxt.config.jsexportdefaultmodules:[\'@nuxtjs/auth\' 查看详情

如何在 Jest 测试中使用 nuxt 运行时配置变量

】如何在Jest测试中使用nuxt运行时配置变量【英文标题】：HowtousenuxtruntimeconfigvariablesinJesttests【发布时间】：2020-12-1609:12:05【问题描述】：我在nuxt.config.js中定义了私有运行时配置。作为开玩笑测试的一部分，当我尝试测试具有... 查看详情

nuxt.js的学习elementui配置博客头部(代码片段)

1、修改项目head配置在nuxt.js的nuxt.config.js配置head，进行全局的配置head:title:'博客社区门户网',meta:[charset:'utf-8',name:'viewport',content:'width=device-width,initial-scale=1&# 查看详情

nuxt.jsexpress模板项目服务器部署

...,express,pm2部署环境：windowsserver之前用nuxt.js的express的模板项目在windows下用nginx进行代理访问，其实有点多余，直接用host文件就可以达到相同的效果，仅供娱乐吧，熟悉一下nginx的基本配置也是好的，其实这段时间研究nuxt.js比较... 查看详情