I am in the process of upgrading some sage-10-alpha sites to latest Sage 10 (old Laravel mix to Bud).
There have been many moments of head scratching but for the most part it is going well.
The only thing that I have not been able to resolve (so far) is building an entry for a SCSS file from a node module.
app
.entry([
// other working assets
plyr: ['../node_modules/plyr/src/sass/plyr.scss'],
})
// other default configs
.build.rules.css.setInclude((paths) => [
...paths,
app.path('../node_modules/plyr/src/sass'),
])
};
The issue I have is that trying to build ../node_modules/plyr/src/sass/plyr.scss
results in bud throwing this error:
$ bud build
✘ sage ./public [2e76698095ac51a9270b]
│
├─ ✘ error
│ Module parse failed: Unexpected character '@' (1:0)
│ You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See
https://webpack.js.org/concepts#loaders
│ > @charset "UTF-8";
│ |
│ | // ==========================================================================
│
I have tried following guide from [bug] Can't import CSS,SCSS in app.js · Issue #1616 · roots/bud · GitHub and Adding transpiler sources | bud.js but still no ball.
I have also tried using
plyr: ['@modules/plyr/src/sass/plyr.scss'],
and
.build.rules.css.setInclude((paths) => [
...paths,
app.path('@modules/plyr/src/sass'),
])
but that seems to make no difference.
I also tried using the dist CSS instead of source SCSS but that too made no difference.
Any pointers are appreciated.
.stylelintrc
{
"plugins": ["stylelint-scss"],
"customSyntax": "postcss-scss",
"extends": [
"@roots/sage/stylelint-config"
],
"rules": {
"import-notation": "string",
"at-rule-no-unknown": null,
"scss/at-rule-no-unknown": true,
"function-no-unknown": null,
"scss/function-no-unknown": [
true,
{
"ignoreFunctions": [
"breakpoint-infix",
"fa-content",
"mask"
]
}
],
"scss/selector-no-redundant-nesting-selector": true,
"annotation-no-unknown": [
true,
{
ignoreAnnotations: ["default", "global"],
},
],
"no-invalid-position-at-import-rule": null,
"declaration-block-no-redundant-longhand-properties": null
}
}
bud.config.js
/**
* Build configuration
*
* @see {@link https://roots.io/docs/sage/ sage documentation}
* @see {@link https://bud.js.org/guides/configure/ bud.js configuration guide}
*
* @typedef {import('@roots/bud').Bud} Bud
* @param {Bud} app
*/
export default async (app) => {
app
/**
* Application entrypoints
* @see {@link https://bud.js.org/docs/bud.entry/}
*/
.entry({
app: ['@scripts/app', '@styles/app'],
customizer: ['@scripts/customizer'],
lazysizes: ['@scripts/lazysizes'],
imageCarousel: [
'@styles/modules/image-carousel',
'@scripts/modules/sliders/imageCarousel',
],
imageGallery: [
'@styles/modules/image-gallery',
'@scripts/modules/sliders/imageGallery',
],
videoPlayer: ['@styles/components/video-player', '@scripts/video-player'],
plyr: ['../node_modules/plyr/src/sass/plyr.scss'],
})
/**
* Directory contents to be included in the compilation
* @see {@link https://bud.js.org/docs/bud.assets/}
*/
.assets(['images'])
/**
* Matched files trigger a page reload when modified
* @see {@link https://bud.js.org/docs/bud.watch/}
*/
.watch(['resources/views', 'app'])
/**
* Proxy origin (`WP_HOME`)
* @see {@link https://bud.js.org/docs/bud.proxy/}
*/
.proxy('https://sage.test')
/**
* Development origin
* @see {@link https://bud.js.org/docs/bud.serve/}
*/
.serve('http://0.0.0.0:3000')
/**
* URI of the `public` directory
* @see {@link https://bud.js.org/docs/bud.setPublicPath/}
*/
.setPublicPath('/app/themes/sage/public/')
.build.rules.css.setInclude((paths) => [
...paths,
app.path('../node_modules/plyr/src/sass'),
])
};