我正在为我的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
要在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-scss
package
stylelint-config-standard-scss
共享配置为您捆绑了stylelint-scss
插件包,因此您不需要在配置中包含它。
每个社区配置还捆绑了每种语言或容器的相关自定义语法:分别为SCSS和Vue文件的postcss-scss和postcss-html。