Linting SCSS files in Sage 10

bud
,
1

I’m setting up a new sage10 theme with bedrock for the first time. Trying to make sage 10 a bit more like 9. I follow this thread and got SCSS and PostCSS added and working. I then followed the documentation for linting and i think its working for the most part.

yarn dev works as intended, it prints out the errors on the webpage. When i run yarn build, it compiles but I get an error for each scss file:

/DevKinsta/public/test/bedrock/web/app/themes/sage/resources/styles/layouts/_posts.scss: 
When linting something other than CSS, you should install an appropriate syntax, e.g. "postcss-scss", and use the "customSyntax" option

Here’s my package.json

{
  "name": "sage",
  "private": true,
  "browserslist": [
    "extends @roots/browserslist-config"
  ],
  "engines": {
    "node": ">=16.0.0"
  },
  "type": "module",
  "scripts": {
    "dev": "bud dev",
    "build": "bud build",
    "translate": "yarn translate:pot && yarn translate:update",
    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --include=\"app,resources\"",
    "translate:update": "for filename in ./resources/lang/*.po; do msgmerge -U $filename ./resources/lang/sage.pot; done; rm -f ./resources/lang/*.po~",
    "translate:compile": "yarn translate:mo && yarn translate:js",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print",
    "translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang",
    "lint": "yarn lint:js && yarn lint:css",
    "lint:js": "eslint resources/scripts",
    "lint:css": "stylelint \"resources/**/*.{css,scss,vue}\"",
    "test": "yarn lint"
  },
  "devDependencies": {
    "@roots/bud": "6.8.0",
    "@roots/bud-eslint": "^6.11.0",
    "@roots/bud-postcss": "^6.11.0",
    "@roots/bud-prettier": "^6.11.0",
    "@roots/bud-sass": "^6.11.0",
    "@roots/bud-stylelint": "^6.11.0",
    "@roots/bud-tailwindcss": "6.8.0",
    "@roots/eslint-config": "^6.11.0",
    "@roots/sage": "6.8.0"
  }
}

Should i downgrade any of these packages? Not sure where i can change the synthax its looking for to custom. Thanks everyone.

2

Ok! i think I was able to fix it. I adjusted my .stylelintrc file to extends the bud-sass configs

{
  "extends": [
    "@roots/sage/stylelint-config",
    "@roots/bud-sass/stylelint-config",
    "@roots/bud-tailwindcss/stylelint-config"
  ]
}

I did have to update the single quote marks to double that are in the app.scss that import the tailwig configs but otherwise everything else is working so far.

2 Likes