问题标签 [sass-lint]

所以我打算把我的 sass 写到 BEM 大会上。我已经使用sass-lint 配置生成器来创建我的配置，并且只编辑了class-name-format's - convention:，strictbem但是我仍然遇到一些问题。

也许我误解了 BEM？

错误：

[sass-lint] 类 ' .bus__tyre--front' 应该写成 BEM（块元素修饰符）格式（类名格式） <element class="bus__tyre--front">

萨斯：

sass-lint.yml：

我有一个具有以下规则的 sass-lint.yml 文件：

正则表达式可以在这里检查： https ://regex101.com/r/SsVde6/2

不幸的是，我无法让它正常工作。

在正则表达式测试器中，您会看到我想要包含哪些内容。从那时起，类名的第一部分可以是 PascalCase BEMified ( BEM ) kebabcase（例如：this-is-kebab-case– 全部小写，中间有破折号）

一个非常常见的模式如下所示： ComponentName__element-name--modifier-name

很多事情已经奏效了，但我也想评估我的 scss 文件中的嵌套 BEM 选择器：

&__burgerCross {…}or &__burger_crossor&__burger__cross例如应该被评估为假。这必须是&__burger-cross

但我真的不知道如何处理嵌套规则。

非常欢迎对 sass-lint 和 regex 提供任何帮助。

如何忽略此错误： Class should be nested within its parent Class force-element-nesting. 当我在一行中覆盖大量嵌套的 soem 类时，我不知道如何消除此错误，例如：

目前我正在使用// sass-lint:disable-all所有块。

我对 sass-lint 有疑问，理论上如果 SASS LINT 有错误，我不应该编译 grunt

我设置输入错误？

这个想法是在错误和警告解决之前它不会编译

当前执行以下语句：

尽管有错误和警告，但这会产生工作环境

任何可能的解决方案？

从Create React App将sass-lint-webpack连接到webpack.config.dev.js后，我遇到了未捕获的错误

只需将其添加到webpack.config.dev.js：

和

然后在运行后yarn start- 我收到错误：“无法读取未定义的属性'编译'”

任何想法如何解决它？

假设我有一堂课：myclass__button-create--success.

我想限制-create部分的使用：

因为它不是新的块、元素或修饰符。允许的结构：

知道如何使用来实现此限制sass-lint吗？

我未能找到解决方案。到目前为止，我看到的唯一可能的结果是Laravel-Elixir-SCSS-Lint，但目前的下载数量并不表明我这是公众的普遍选择。我确实查看了Laravel Mix Extensions page，那里也没有什么明显的。从来没想过 Laravel Mix 在使用 Gulp、Grunt 等 lint SASS/SCSS 之前不会有一个明确的选择。

预先感谢您的帮助。

更新

经过大量挖掘，我得出了以下解决方案，但是 linting 效果不佳，并且忽略了几个错误（最后检查控制台输出）

包.json

webpack.mix.js

.stylelintrc.json

样式.scss

控制台输出

::selection在输出样式的 mixin 中：

一切都按预期输出。

如果我更改列表中项目的顺序：

它仅输出第二项的情况。

如果我将第一个列表项更改为不以“-”开头，那么它会输出两种情况。

为什么当“-moz-”是第一项时它不起作用？

我们正在将 Sass@import语句迁移到新@use指令，因为旧@import语句将在未来几年内被弃用。
有没有人找到在 sass-lint 中提供命名空间/作用域的解决方案？
如果我尝试使用它们，我会收到错误，例如：

将导致：

3:1 错误请检查从第 3 行开始的块的有效性致命

也试过：

我知道 sass-lint 目前没有维护，我们可能不得不更改为更新的 'stylelint' 但也许我只是错过了一些让它工作的东西？