Sage Theme CSS not compiling

Hi Support,

I can’t compile Sage theme CSS. Getting the following error when we tried to run yarn build command. Anyone can help us how to fix this issue.

Cheers,
Robin

Which version of Sage?
Which version of Node are you using?
Can you paste your package.json file contents?
Did you yarn install before?

Looks like you’re on WSL :thinking: Are you on WSL1 or WSL2? And which version of Windows are you running?

I would recommend you run the following command in Powershell (as admin):

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted

Windows blocks scripts like Webpack and this removes that restriction

Please ignore my last comment

Please check below versions.
Sage version - 9.0.9
Node version - v16.15.1
I am getting the following error

Package JSON content
{
“name”: “sage”,
“version”: “9.0.9”,
“author”: “Roots team@roots.io”,
“homepage”: “Sage | WordPress Starter Theme | Roots”,
“private”: true,
“repository”: {
“type”: “git”,
“url”: “git://github.com/roots/sage.git”
},
“bugs”: {
“url”: “Issues · roots/sage · GitHub
},
“licenses”: [
{
“type”: “MIT”,
“url”: “The MIT License | Open Source Initiative
}
],
“browserslist”: [
“last 2 versions”,
“android 4”,
“opera 12”
],
“scripts”: {
“build”: “webpack --progress --config resources/assets/build/webpack.config.js”,
“build:production”: “webpack --env.production --progress --config resources/assets/build/webpack.config.js”,
“build:profile”: “webpack --progress --profile --json --config resources/assets/build/webpack.config.js”,
“start”: “webpack --hide-modules --watch --config resources/assets/build/webpack.config.js”,
“rmdist”: “rimraf dist”,
“lint”: “npm run -s lint:scripts && npm run -s lint:styles”,
“lint:scripts”: “eslint resources/assets/scripts resources/assets/build”,
“lint:styles”: “stylelint "resources/assets/styles/**/.{css,sass,scss,sss,less}"",
“test”: “npm run -s lint”,
“generate:po”: "find resources/lang -type f -name '
.po’ -exec msgfmt -o {}.mo {} \; && find resources/lang -type f -name '.po.mo’ -execdir rename -f ‘s/\.po\.mo$/.mo/’ ‘{}’ \; && rm -rf resources/lang/.po.mo”,
“pot”: “mkdir -p ./resources/lang && find ./resources ./app -iname ‘.php’ | xargs xgettext --add-comments=TRANSLATORS --force-po --from-code=UTF-8 --default-domain=de_DE -k__ -k_e -k_n:1,2 -k_x:1,2c -k_ex:1,2c -k_nx:4c,12 -kesc_attr__ -kesc_attr_e -kesc_attr_x:1,2c -kesc_html__ -kesc_html_e -kesc_html_x:1,2c -k_n_noop:1,2 -k_nx_noop:3c,1,2, -k__ngettext_noop:1,2 -o resources/lang/sage.pot && find ./resources -iname '.blade.php’ | xargs xgettext --language=Python --add-comments=TRANSLATORS --force-po --from-code=UTF-8 --default-domain=de_DE -k__ -k_e -k_n:1,2 -k_x:1,2c -k_ex:1,2c -k_nx:4c,12 -kesc_attr__ -kesc_attr_e -kesc_attr_x:1,2c -kesc_html__ -kesc_html_e -kesc_html_x:1,2c -k_n_noop:1,2 -k_nx_noop:3c,1,2, -k__ngettext_noop:1,2 -j -o resources/lang/sage.pot”
},
“engines”: {
“node”: “>= 8.0.0”
},
“devDependencies”: {
“autoprefixer”: “~8.2.0”,
“babel-core”: “^6.26.3”,
“babel-eslint”: “^10.1.0”,
“babel-loader”: “^8.2.5”,
“babel-plugin-transform-runtime”: “^6.23.0”,
“babel-preset-env”: “^1.7.0”,
“babel-preset-stage-2”: “^6.24.1”,
“babel-register”: “^6.26.0”,
“browser-sync”: “~2.24.7”,
“browsersync-webpack-plugin”: “^0.6.0”,
“bs-html-injector”: “~3.0”,
“buble-loader”: “^0.4.1”,
“cache-loader”: “~1.2.5”,
“clean-webpack-plugin”: “^0.1.18”,
“copy-globs-webpack-plugin”: “^0.2.0”,
“css-loader”: “^0.28.9”,
“cssnano”: “~4.0.5”,
“eslint”: “~4.19.1”,
“eslint-loader”: “~1.9”,
“eslint-plugin-import”: “~2.14.0”,
“extract-text-webpack-plugin”: “~3.0.2”,
“file-loader”: “^1.1.6”,
“friendly-errors-webpack-plugin”: “^1.6.1”,
“imagemin-mozjpeg”: “~7.0.0”,
“imagemin-webpack-plugin”: “~2.2.0”,
“import-glob”: “~1.5”,
“postcss-loader”: “~2.1.0”,
“postcss-safe-parser”: “~3.0”,
“resolve-url-loader”: “~2.3.1”,
“rimraf”: “~2.6”,
“sass-loader”: “~6.0”,
“style-loader”: “^0.22.1”,
“stylelint”: “^8.4.0”,
“stylelint-config-standard”: “~18.2.0”,
“stylelint-webpack-plugin”: “^0.10.5”,
“tailwindcss”: “^1.9.1”,
“uglifyjs-webpack-plugin”: “^1.3.0”,
“url-loader”: “^0.6.2”,
“vue-loader”: “^17.0.0”,
“vue-style-loader”: “^4.1.3”,
“vue-template-compiler”: “^2.6.14”,
“webpack”: “~3.10.0”,
“webpack-assets-manifest”: “^1.0.0”,
“webpack-cli”: “^4.9.1”,
“webpack-dev-middleware”: “~2.0.4”,
“webpack-hot-middleware”: “~2.22.3”,
“webpack-merge”: “~4.1.4”,
“yargs”: “~11.0.0”
},
“dependencies”: {
“choices.js”: “^9.0.1”,
“easy-autocomplete”: “^1.3.5”,
“jquery”: “^3.3.1”,
“node-sass”: “^5.0.0”,
“slick-carousel”: “^1.8.1”,
“vue”: “^3.2.37”
}
}

You are using node-sass 5.X. See node supported versions for node-sass:

Have you tried using another node version? You don’t seem to have this project prepared to compile on v16.15.1. Try using lts/dubnium → v10.24.1 or lts/carbon → v8.17.0

And I think node-sass should be a devDependency as it compiles sass/scss files to css on each build. I think you don’t need it as a dependency.

1 Like