I’m in the process of moving an old Sage 9 site to Sage 10, everything seems to be working fine, except our SCSS files don’t seem to compile properly when running with yarn dev or build. All our variables and mixins come out like so:
We’re getting errors such as:
Which implies to me that it’s being treated as CSS and hasn’t compiled.
Below is my bud.config.js and my package.json - any help would be appreciated!
/**
* Compiler configuration
*
* @see {@link https://roots.io/docs/sage sage documentation}
* @see {@link https://bud.js.org/guides/configure bud.js configuration guide}
*
* @param {import('@roots/bud').Bud} app
*/
export default async (app) => {
/**
* Application assets & entrypoints
*
* @see {@link https://bud.js.org/docs/bud.entry}
* @see {@link https://bud.js.org/docs/bud.assets}
*/
app
.entry('app', ['@scripts/app', '@styles/app'])
.assets(['images']);
/**
* Set public path
*
* @see {@link https://bud.js.org/docs/bud.setPublicPath}
*/
app.setPublicPath('/app/themes/aitc/public/');
/**
* Development server settings
*
* @see {@link https://bud.js.org/docs/bud.setUrl}
* @see {@link https://bud.js.org/docs/bud.setProxyUrl}
* @see {@link https://bud.js.org/docs/bud.watch}
*/
app
.setUrl('http://localhost:3000')
.setProxyUrl('http://localhost')
.watch(['resources/views', 'resources/styles', 'app']);
};
{
"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": "wp i18n update-po ./resources/lang/sage.pot ./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.7",
"@roots/bud": "^6.12.3",
"@roots/bud-eslint": "^6.12.3",
"@roots/bud-postcss": "^6.12.3",
"@roots/bud-prettier": "^6.12.3",
"@roots/bud-sass": "^6.12.3",
"@roots/bud-stylelint": "^6.12.3",
"@roots/eslint-config": "^6.12.3",
"@roots/sage": "^6.12.3"
},
"dependencies": {
"custom-event-polyfill": "^1.0.7",
"element-closest": "^3.0.2",
"jquery": "^3.3.1",
"litepicker": "^2.0.11",
"polyfill-nodelist-foreach": "^1.1.2"
}
}
