Добрый день.
В сборщике gulp использую проверку стилей через stylelint. Для теста использую самый простой файл стилей
style.scss, который импортирует переменную из
variables.scss
style.scss:
@import "variables";
body {
background-color: $main-color;
}
variables.scss:
$main-color: #555555;
Файл конфигурации
.stylelintrc.json:
{
"plugins": [
"stylelint-scss"
],
"extends": [
"stylelint-config-standard",
"stylelint-config-standard-scss",
"stylelint-config-htmlacademy"
],
"rules": {
"indentation": 2,
"at-rule-no-vendor-prefix": true,
"at-rule-empty-line-before": "always",
"scss/selector-no-redundant-nesting-selector": true,
"scss/at-import-partial-extension": "never",
"block-closing-brace-newline-before": "always",
"block-closing-brace-newline-after": "always",
"at-rule-name-case": "lower",
"at-rule-name-space-after": "always",
"at-rule-semicolon-newline-after": "always",
"at-rule-semicolon-space-before": "never",
"selector-max-class": 2,
"function-calc-no-invalid": false,
"unit-allowed-list": [
"em",
"rem",
"%",
"px",
"vh",
"vm",
"vmax",
"vmin"
]
}
}
package.json:
{
"name": "gulp-2021",
"version": "1.0.0",
"description": "",
"main": "gulpfile.babel.js",
"scripts": {
"stylelint-fix": "stylelint ./src/styles/**/*.scss --fix --custom-syntax postcss-scss"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.0",
"@babel/register": "^7.16.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^8.0.0",
"gulp-clean-css": "^4.3.0",
"gulp-plumber": "^1.2.1",
"gulp-rename": "^2.0.0",
"gulp-sass": "^5.0.0",
"gulp-shorthand": "^1.1.0",
"gulp-sourcemaps": "^3.0.0",
"gulp-stylelint": "^13.0.0",
"gulp-w3c-html-validator": "^5.1.0",
"node-sass": "^6.0.1",
"postcss-scss": "^4.0.2",
"sass": "^1.43.4",
"stylelint": "^14.0.1",
"stylelint-config-htmlacademy": "^0.1.10",
"stylelint-config-standard": "^23.0.0",
"stylelint-config-standard-scss": "^2.0.1",
"stylelint-scss": "^4.0.0"
},
"dependencies": {}
}
Файл, который запускает сборку стилей:
import gulp from 'gulp'
import plumber from 'gulp-plumber'
import gulpSass from 'gulp-sass'
import dartSass from 'sass'
import cleanCSS from 'gulp-clean-css'
import sourcemaps from 'gulp-sourcemaps'
import shorthand from 'gulp-shorthand'
import autoprefixer from 'gulp-autoprefixer'
import gulpStylelint from 'gulp-stylelint'
import rename from 'gulp-rename'
const sass = gulpSass(dartSass);
export default function style() {
return gulp.src('src/styles/style.scss')
.pipe(plumber())
.pipe(gulpStylelint({
failAfterError: false,
reporters: [
{
formatter: 'string',
console: true
}
]
}))
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer({
cascade: false
}))
.pipe(shorthand())
.pipe(cleanCSS({
debug: true,
compatibility: '*'
}, details => {
console.log(`${details.name}: Original size:${details.stats.originalSize} - Minified size: ${details.stats.minifiedSize}`)
}))
.pipe(sourcemaps.write())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('build/css'))
}
Во время сборки возникает ошибка:
λ gulp start
[17:31:37] Requiring external module @babel/register
[17:31:39] Using gulpfile D:\gulp-2021\gulpfile.babel.js
[17:31:39] Starting 'start'...
[17:31:39] Starting 'html'...
[17:31:40] w3c-html-validator D:\gulp-2021\src\pages\index.html pass
[17:31:40] Finished 'html' after 528 ms
[17:31:40] Starting 'style'...
[17:31:41]
src/styles/style.scss
1:1 ✖ Unknown rule function-calc-no-invalid function-calc-no-invalid
\style.css: Original size:31 - Minified size: 21
[17:31:41] Finished 'style' after 1.17 s
[17:31:41] Finished 'start' after 1.71 s
Я полдня гуглил эту ошибку. Вроде как в stylelint 14.0.0 вообще это правило убрали, в файле конфигурации у меня его нет. Я зашел в тупик. Может кто-то сможет меня направить в нужное русло, как справиться с ошибкой?
