如何使用stylelint和stylelint-selector-bem-pattern製作皮棉BEM風格？

我試圖使用stylelint和stylelint-selector-bem-pattern plugin來使用BEM風格，但無法使其工作。如何使用stylelint和stylelint-selector-bem-pattern製作皮棉BEM風格？

我的配置如下：

節點：5.11.0
吞-stylelint：^ 2.0.2
stylelint選擇器-BEM-圖案：^ 0.2.3

.stylelintrc

{ 
    "plugins": [ 
     "stylelint-selector-bem-pattern" 
    ], 
    "rules": { 
     "selector-bem-pattern": { 
      preset: "suit" 
     }, 
    }, 
    "extends": "@alienlebarge/stylelint-config", 
}

和一個CSS文件測試

.12ad2-asd--sad { 
    color: rgba(255, 0, 0, .5); 
} 






#yeah { 
    height: 10px; 
}

我從@alienlebarge/stylelint-config得到錯誤信息而不是從stylelint-selector-bem-pattern plugin

src/assets/foehn/styles/foehn.css 
4:1 ✖ Unexpected empty line max-empty-lines 
5:1 ✖ Unexpected empty line max-empty-lines 
6:1 ✖ Unexpected empty line max-empty-lines 
7:1 ✖ Unexpected empty line max-empty-lines 
8:1 ✖ Unexpected empty line max-empty-lines 
9:1 ✖ Unexpected empty line max-empty-lines 
9:1 ✖ Unexpected id selector selector-no-id

來源

2016-04-27 alienlebarge

從這裏的代碼看起來這個問題可能是你沒有定義組件在CSS文件的頂部：https://github.com/postcss/postcss-bem-linter#defining-a-component

來源

2016-04-27 13:29:36 davidtheclark

謝謝，我覺得很愚蠢。 http://i.giphy.com/sbK57wJO4z7jy.gif – alienlebarge

它經常被忽視（即使是我）。 – davidtheclark

@davidtheclark你設法解決這個問題嗎？我正在尋找執行一個吞嚥任務。如果您可以在這裏發佈工作解決方案，將會有所幫助。謝謝！ –

Stylelint插件只會運行定義的組件，在示例中情況並非如此。

截至project documentation定義：如果它知道CSS的上下文

插件將僅皮棉CSS：它是一個實用程序或組件。要定義上下文，請使用配置選項根據文件名（css/components/*.css）對其進行定義，或者使用特殊註釋爲CSS之後的CSS定義上下文。定義組件時，需要組件名稱。

您可以在stylelintrc.json隱含地定義：

..., 
implicitComponents: 'components/**/*.css', 
...

或者在其成分與評論到MyComponent.css：

/** @define ComponentName */ 

.MyComponent {...}

來源

2017-10-30 14:35:42 Custodio

如何使用stylelint和stylelint-selector-bem-pattern製作皮棉BEM風格？

回答

相關問題