Added a dependency but stylesheet can't be found

[chrisgo]

Hello,

I added the folowing dependency; https://splitting.js.org/
By doing this;

yarn add -D splitting

So my package.json looks like this;

  "devDependencies": {
    "@roots/bud": "6.11.0",
    "@roots/bud-tailwindcss": "6.11.0",
    "@roots/sage": "6.11.0",
    "@studio-freight/lenis": "^1.0.4",
    "@tailwindcss/typography": "^0.5.9",
    "gsap": "^3.11.5",
    "splitting": "^1.0.6"
  },

I imported JS in app.js;

import Splitting from 'splitting';

Whenever I try import the CSS in app.css, this happens;

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import '~splitting/dist/splitting.css';
@import '~splitting/dist/splitting-cells.css';

Error;

│  Failed to find '~splitting/dist/splitting.css'
│   in [
│     ./resources/styles
│   ]

But when I click on the .css link I get redirected to the file I want to import. What am I doing wrong :)?

Thanks!

[strarsis]

I can reproduce this issue with latest Sage 10.

One workaround is to specify the relative path:

@import '../../node_modules/splitting/dist/splitting.css';
@import '../../node_modules/splitting/dist/splitting-cells.css';

Possibly similar/related issues:

[bug] [`v2.0.0-beta.8`] packages without exports are flagged as missing dependencies

https://github.com/roots/bud/issues/1622

[chrisgo]

But it should be working like I tried right? If i’m doing something wrong I would like to know.

[strarsis]

Are you using the latest @roots/bud(-*) dependencies?
Do you still have the same issue?

[erip2]

Firstly, you shouldn’t add the package as a dev dependecy. This is a package that will be used on the user so it needs to be added in the dependency list. Please, try to remove it and add it again without the -D keyword.

Now, for the css to be known by the local CSS file you also need to add the css-loader to the bud configuration, eg:

First, install the css-loader: yarn add -D css-loader

Then, on the bud.config.js you can add:

export default async (app) => {
  app
  /** ..... **/
  .hooks.on(`build.module.rules.oneOf`, (rules = []) => {
      rules.push({
        test: /\.css$/,
        use: [
          {
            loader: `css-loader`,
          },
        ],
      })
  
      return rules
    })

Now, on the main css file remove the ~ from the imports:

@import 'splitting/dist/splitting.css';
@import 'splitting/dist/splitting-cells.css';

and now hopefully it should work.

[talss89]

@erip2

Firstly, you shouldn’t add the package as a dev dependecy.

I’m not sure that’s correct. splitting is for frontend, but it will be compiled into a runtime / chunk by Webpack via Bud. This is why we put extensions like bud-vue in devDependencies.

@erip2

Now, for the css to be known by the local CSS file you also need to add the css-loader to the bud configuration, eg:

Bud contains a working setup for css-loader out-of-the-box, and in Sage 10 it’s used for Tailwind.

Sounds like @strarsis’ idea that splitting does not expose exports correctly is the issue here, to me. But I could be wrong. As a side note, splitting hasn’t had a release since 2018.

[erip2]

@talss89

I’m not sure that’s correct. splitting is for frontend, but it will be compiled into a runtime / chunk by Webpack via Bud. This is why we put extensions like bud-vue in devDependencies.

I don’t think that’s correct. devDependencies are packages that are used for testing and other development processes, there’s no need to ship them to the client since their only purpose is on the development process. That’s why bud-vue is in the devDependecies list; what it does is get the .vue files and makes them to a .js file (and a lot of other processes) so the browser can run. At the end, only the .js files are shipped to the client.
This package on the other hand is used for doing changes on HTML, it should go to the client. That’s why even in its documentation the installing is without the -D.

@talss89

Bud contains a working setup for css-loader out-of-the-box, and in Sage 10 it’s used for Tailwind.

Yes, this confused me as well, but I did make tests locally and what I’ve written above worked.