Adding linting on a Bootstrap and Sass project

sage
,
1

I followed this Adding ESLint, Prettier, and Stylelint | Sage Docs | Roots to get linting set up and now I get bud.postcss.set is not a function when I run yarn dev. This is my package.json file

{
  "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": {
    "@popperjs/core": "^2.11.6",
    "@roots/bud": "6.8.0",
    "@roots/bud-eslint": "^6.11.0",
    "@roots/bud-prettier": "^6.11.0",
    "@roots/bud-sass": "^6.8.0",
    "@roots/bud-stylelint": "^6.11.0",
    "@roots/eslint-config": "^6.11.0",
    "@roots/sage": "6.8.0",
    "bootstrap": "^5.2.3"
  },
  "dependencies": {}
}
2

Looks like you’re using Bootstrap and Sass which might require some different instructions

Are you able to reproduce this issue on a Sage 10 installation without Bootstrap and Sass?

3

I just spun up a new site and can confirm that it does look like it has something to do with Bootstrap and scss. Do you have any pointers to get back on track with scss and bootstrap?

4

The docs you linked specifically pull in stylelint rules for Tailwind CSS:

.stylelintrc:

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

Try replacing @roots/bud-tailwindcss/stylelint-config with stylelint-config-recommended-scss:

{
  "extends": [
    "@roots/sage/stylelint-config",
-   "@roots/bud-tailwindcss/stylelint-config"
+   "stylelint-config-recommended-scss"
  ]
}
5

Still the same error… I tried @roots/sage/stylelint-config-recommended-scss also…

6

I’m not sure. I’m not able to hit the error you’re describing, but I do hit this error related to trying to import Bootstrap after configuring stylelint:

│ resources/styles/app.css
│  1:9  ✖  Expected ""bootstrap"" to be "url("bootstrap")"  import-notation
│

Hopefully someone else who is actively using Bootstrap can chime in. I know that Sass no longer recommends using @import and has moved to @use, although Bootstrap themselves have not made the jump yet.

7

I fixed it… First off I didn’t have this installed yarn add @roots/bud-postcss --dev for some reason. Then I got the error you got and used @use rather than @import and I got things to compile with linting working. Thanks for your help in getting me pointed in the right direction.

Oh… I also did what you said above

{
  "extends": [
    "@roots/sage/stylelint-config",
-   "@roots/bud-tailwindcss/stylelint-config"
+   "stylelint-config-recommended-scss"
  ]
}
3 Likes
8

Many bootstrap features are not usable with the suggested workaround. For example at-rules like include. I would suggest not using stylelint in conjunction with bootstrap and sass. I can do without it and cause myself even fewer problems.