Added a dependency but stylesheet can't be found

bud
5

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.

2 Likes