[bug] Can't import CSS,SCSS in app.js

RomkaLTU commented 2 years ago

Agreement

[X] This is not a duplicate of an existing issue
[X] I have read the guidelines for Contributing to Roots Projects
[X] This is not a personal support request that should be posted on the Roots Discourse community

Describe the issue

Can't compile any css, scss file imported to app.js bud doctor returning unknown error "TypeError: Cannot read properties of undefined (reading 'toWebpack')"

When trying to import import 'swiper/css'; I'm getting an error:

` Module parse failed: Unexpected character '@' (13: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	*/

@font-face{font-family:swiper... `

This is a CSS file, anyway installed scss loader, same error when trying to import .scss.

Expected Behavior

Everything should compile without errors.

Actual Behavior

Complaining about missing loaders, some unclear errors when running bug doctor.

Steps To Reproduce

in sage10 app.js try to import CSS or scss file

version

6.3.5

What package manager are you using?

yarn

version

1.22.17

Logs

ERROR  ./node_modules/swiper/swiper.min.css

Module parse failed: Unexpected character '@' (13: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
|  */
| 
> @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6g

Configuration

/**
 * @typedef {import('@roots/bud').Bud} bud
 *
 * @param {bud} app
 */
module.exports = async(app) => {
  app
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      app: ['@scripts/app', '@styles/app'],
      editor: ['@scripts/editor', '@styles/editor'],
    })

    /**
     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.
     */
    .assets('images')

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch('resources/views/**/*', 'app/**/*')

    /**
     * Target URL to be proxied by the dev server.
     *
     * This is your local dev server.
     */
    .proxy('***')

    /**
     * Development URL
     */
    .serve('***');
};

Relevant .budfiles

No response

RomkaLTU commented 2 years ago

Additional info on this:

I copied swiper.min.css from node_modules and placed it in styles folder and imported it, no errors then. But same file imported from node_modules ('../../node_modules/swiper/swiper.min.css') complaining about loaders.

import '@styles/swiper.css'; // works
import '../../node_modules/swiper/swiper.min.css'; // doesn't work

kellymears commented 2 years ago

this is by design. bud.js only transpiles code in your @src directory, by default.

see documentation on transpiler sources: https://bud.js.org/guides/general-use/transpiler-sources

You want to add something like this:

    /**
     * Allow transpiling swiper css source
     */
    .build.rules.css.setInclude((paths) => [
      ...paths,
      app.path("@modules/swiper"),
    ]);

The benefit of this is that we're not applying postcss/babel/etc. to all files in the project, most of which don't need them applied. It saves a lot of time.

roots / bud