Cannot build entry sourced from node_modules

bud
1

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'),
    ])
};
2

If I understand you correctly, it should be sufficient to just include the SCSS from node_modules in an entrypoint SCSS file:

1 Like
3

I did end up doing that in the end, so thanks.

Would be good to just place it into entry points rather than include it in another file, though.

4

When you just want to copy the files without further processing (and filename hashing),
you can use bud.assets(...) using source/destination tuples to directly copy files.

1 Like