Question

我们有一系列的旧版CSS文件，需要整理和缩小，然后还有一系列新的SCSS文件，它们需要整理，渲染到CSS和缩小。插入SCSS文件时，将Gulp与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 {”，但我没有看到它们。我想念什么？

Answer 1

这是我所学到的。我的Gulp脚本没有问题。大声笑。我误解了美元可变模式。美元规则着眼于第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

SCSS皮棉配置文件与CSS皮棉配置文件分开

1 个答案: