问独立于CSS lint配置文件的SCSS lint配置文件
EN

Stack Overflow用户

提问于 2019-09-11 21:16:19

回答 1查看 485关注 0票数 1

我们有一系列遗留的CSS文件，需要linting和minifying，然后又有一系列新的SCSS文件，需要linting，渲染到CSS和minifying。在对SCSS文件进行linting时，使用Gulp with stylelint-scss和gulp stylelint (可以使用stylelint选项)时，我没有得到所需的测试错误。我的设置正确吗？

我的测试SCSS风格是

.component {
    position: relative;
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
    color:$color-red;
    &:hover { 
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
    }
}

我已经为SCSS设置了一个自定义配置(名为：.scsslintrc)，如下所示

 {
    "plugins": [
        "stylelint-scss"
    ],
    "rules": {
        "scss/dollar-variable-colon-space-before": "always",
        "scss/dollar-variable-colon-newline-after": "always",
        "scss/dollar-variable-pattern": "^foo",
        "scss/selector-no-redundant-nesting-selector": true,
    }
 }

在Gulp中，我使用的是gulp-stylelint

    const lintScss = () => {
    return gulp.src( path.scss.src )
    .pipe( debug({ title: "SCSS File: ", showCount: false }) )
    .pipe( stylelint({
        configFile: ".scsslintrc",
        failAfterError: true,
        reportOutputDir: 'reports/lint',
        reporters: [
        {formatter: 'verbose', console: true}
        ],
        debug: true
    }) )
    .pipe( gulp.dest( path.scss.dest ))
}

结果是

Starting 'lintScss'...
[16:52:54] dir /mydir/gulp
[16:52:54] SCSS File:  test/scss/scss_test.scss
[16:52:55] 

1 source checked
/mydir/gulp/test/scss/scss_test.scss

0 problems found

[16:52:55] Finished 'lintScss' after 229 ms

我真的希望看到围绕"color:$color-red;“和"&:hover {”的错误，但我没有看到它们。我遗漏了什么？

gulp

stylelint

腾讯特效SDK 2.5折起

美颜基础/原子能力套餐低至1500元/月，提供丰富的美化能力，支持全平台集成

回答 1

Stack Overflow用户

发布于 2019-09-12 15:44:07

这是我学到的东西。我的Gulp脚本没有任何问题。LOL。我误解了美元可变模式。美元规则是看第1列，而不是看冒号后面的美元符号。此外，如果您有CSS错误，除了SCSS错误之外，CSS错误将首先显示，并且独立于其他错误。因此，如果省略大括号，它只会发出CSS错误。一旦修复了CSS错误，并再次运行Gulp，您就会看到SCSS错误。

第1列中包含$的示例SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}
.component {
    position: relative;
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
    color:$color-red;
    &:hover /* omitted curly brace causing CSS error */
        box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
    }
}

运行lintScss任务

[11:26:49] Starting 'lintScss'...
[11:26:49] SCSS File:  test/scss/scss_test.scss
[11:26:49] 

test/scss/scss_test.scss
12:7  ✖  Missed semicolon   CssSyntaxError

[11:26:49] Finished 'lintScss' after 214 ms

一旦解决了这个问题。你再运行一次lintScss ..。

[11:27:31] Starting 'lintScss'...
[11:27:31] SCSS File:  test/scss/scss_test.scss
[11:27:31] 

test/scss/scss_test.scss
1:1   ✖  Expected $ variable name to match specified pattern   scss/dollar-variable-pattern            
1:12  ✖  Expected single space before ":"                      scss/dollar-variable-colon-space-before 
1:12  ✖  Expected newline after ":"                            scss/dollar-variable-colon-newline-after
2:1   ✖  Expected $ variable name to match specified pattern   scss/dollar-variable-pattern            
2:15  ✖  Expected single space before ":"                      scss/dollar-variable-colon-space-before 
2:15  ✖  Expected newline after ":"                            scss/dollar-variable-colon-newline-after



[11:27:31] Finished 'lintScss' after 256 ms