如何使用 stylelint-webpack-plugin(使用 webpack 2)正确 lint .sass 文件? [英] How to correctly lint .sass files using stylelint-webpack-plugin (with webpack 2)?

问题描述

我实际上正在尝试在 Webpack 2 项目中为我的 .sass 文件使用 linter.所以我使用stylelint-webpack-plugin"，但无论我如何配置它，我总是收到关于分号的警告/错误(与 .sass 语法无关).似乎 poscss-sass 包没有完成这项工作......对于使用 .sass(不是 .scss)语法的人有什么解决方案吗?提前谢谢！

I'm actually trying to use a linter for my .sass files, in a Webpack 2 project. So I'm using "stylelint-webpack-plugin", but no matter how I configure it, I always get warnings/errors about semicolons (which are not relevant with .sass syntax). It seems that poscss-sass package doesn't do the job... Is there any solution for people using .sass (not .scss) syntax? Thx in advance!

推荐答案

postcss-sass 解析器非常新，它与 stylelint 的兼容性仍在评估.它尚未捆绑在 stylelint 中，因此无法通过 stylelint-webpack-plugin 的 语法选项.

The postcss-sass parser is very new and its compatibility with stylelint is still being evaluated. It is not yet bundled within stylelint, and is therefore not available via stylelint-webpack-plugin's syntax option.

我总是收到关于分号的警告/错误(与 .sass 语法无关).

I always get warnings/errors about semicolons (which are not relevant with .sass syntax).

这是因为，在没有 postcss-sass 解析器的情况下，标准 PostCSS 解析器正在尝试解析您的 SASS 代码.它期望声明块内的声明用分号分隔.

This is because, in the absence of the postcss-sass parser, the standard PostCSS parser is attempting to parse your SASS code. It expects declarations within declaration blocks to be separated by semicolons.

custom-syntax 选项由 stylelint 本身提供.因此，如果您愿意，可以使用 stylelint CLI 对 postcss-sass 解析器进行实验:

A custom-syntax option is provided by stylelint itself. Therefore, if you like, you can experiment with the postcss-sass parser by using the stylelint CLI:

stylelint "**/*.sass" --custom-syntax postcss-sass

这应该可以解决您遇到的有关分号的任何语法错误.

This should resolve any syntax errors you're getting regarding semi-colons.

如果您使用 stylelint-config-standard，您还应该 关闭所有检查大括号和分号的规则.

If you're using stylelint-config-standard, you should also turn off any rules that check braces and semicolons.

作为 SASS 的替代方案，您可以使用 SugarSS.它是一种基于缩进的 CSS 语法，与 stylelint 兼容，可在 stylelint-webpack-plugin 中使用.

As an alternative to SASS, you could use SugarSS. It is an indent-based CSS syntax that is compatible with stylelint and available within stylelint-webpack-plugin.

这篇关于如何使用 stylelint-webpack-plugin(使用 webpack 2)正确 lint .sass 文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！