如何在Vue文件中写入的样式标签上运行stylesint

Question

我正在为我的Vue项目中的样式配置样式。对于独立的.css和.scss文件，我使用了styleslint -scss包。但是我在为我的vue组件中编写的样式标签配置这个时遇到了困难，就像下面这样。

<script setup lang="ts">
defineProps({})
</script>
<template class="container">
<p>Sample p tag</p>
</template>
<style lang="scss" scoped>
.container {
p {
color: white;
}
@media (min-width: 500px) {  // Prohibited as per scss/media-feature-value-dollar-variable rule
color: green;
}
}
</style>

我必须为<style lang="scss" scoped></style>标签内写的样式运行stylesint

Answer 1

要在Vue sfc中检测CSS, SCSS和SCSS，您可以使用Stylelint的overrides配置属性来扩展共享配置的组合:

• stylelint-config-standard-官方标准配置(由Stylelint团队维护)
• stylelint-config-standard-scss-用于检测SCSS的标准配置的改编(由SCSS社区维护)
• stylelint-config-standard-vue-用于检测Vue sfc的标准配置的改编(由Vue社区维护)

首先，安装依赖:

npm i --save-dev postcss-html stylelint-config-standard-vue stylelint-config-standard stylelint-config-standard-scss

然后更新你的样式配置为:

{
"extends": ["stylelint-config-standard"]
"overrides": [
{
"files": ["*.scss", "**/*.scss"],
"extends": ["stylelint-config-standard-scss"]
},
{
"files": ["*.vue", "**/*.vue"],
"extends": [
"stylelint-config-standard-scss",
"stylelint-config-standard-vue/scss"
]
}
]
}

最后，在你的CSS, SCSS和Vue文件上运行stylesint:

npx stylelint "**/*.{css,scss,vue}"

这个配置告诉Stylelint对CSS文件使用官方配置，对SCSS文件使用SCSS社区配置，对Vue文件中的SCSS使用SCSS和Vue社区配置。

对于独立的。css和。scss文件，使用stylelint-scsspackage

stylelint-config-standard-scss共享配置为您捆绑了stylelint-scss插件包，因此您不需要在配置中包含它。

每个社区配置还捆绑了每种语言或容器的相关自定义语法:分别为SCSS和Vue文件的postcss-scss和postcss-html。