时间戳

首页 > 解决方案 > SCSS lint 配置文件与 CSS lint 配置文件分开

gulp - SCSS lint 配置文件与 CSS lint 配置文件分开

问题描述

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

我的测试 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 {" 我没有看到它们。我错过了什么？

标签： gulpstylelint

解决方案

这是我学到的。我的 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

推荐阅读