CSS Not Loading in?

[joecaraccio]

When trying to make overrides to the css or scss and change the way the admin panel looks, in my config I specify

export default buildConfig({
  serverURL: 'http://localhost:80',
  admin: {
    meta: {
      titleSuffix: '- '
    },
    css: path.resolve(__dirname, 'stylesheet.scss'),
    user: Users.slug,
  },
  collections: [
    Pages,
    Users
  ],
});

In the stylesheet.scss (which I have also tried as .css)

.nav {
    background-color: rebeccapurple !important;
}

However, the left div of class nav does not reflect this background color.

Am I doing something wrong? Do I need to do something with express as well?

[DanRibbens]

What you have should be correct. I just recreated exactly what you had done on a sample project.

Can you check that your stylesheet.scss is in the same directory as your config?

[DanRibbens]

[DanRibbens]

@joecaraccio I moved this to a discussion since I tested and can't recreate the problem you are having. If there is a bug or something unexpected going on then we can open up a new issue.

Let us know if you need some more help.

[joecaraccio]

Any recommendations on how to debug this?

[jmikrut]

Are you SURE that your stylesheet is indeed located right next to your Payload config, titled stylesheet.scss?

If you using TS, and, in your docker container, if you're running against dist or similar, you may not have copied your stylesheet.scss to the dist folder.

Outside of that, there should be nothing that you need to do differently within Docker.

One other thing... Docker "caches" volume mounts and it's a PIA to get Docker to recognize changed files. You might be up against a docker volume cache issue.

[joecaraccio]

Assuming payload.config.js is what your referring to, then yup. Same directory

Running JS. I'll try to see if I can figure it out tonight.

[chris-schra]

same problem here... I tried adding sass-loader and node-sass, didn't help.
One data point is that I'm on Windows...

[chris-schra]

updated to latest (0.19.2), now I get

ModuleBuildError: Module build failed (from ../../node_modules/payload/node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
    ╷
132 │ @import '~payload-user-css';
    │         ^^^^^^^^^^^^^^^^^^^

hm, I'll debug, I guess

[chris-schra]

alright, please make sure you have a copyfiles step like in the demo (https://github.com/payloadcms/public-demo/blob/master/package.json):
"copyfiles": "copyfiles -u 1 src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json} dist/",

for reference, when using a 2-step build process like I do (building payloadcms and server into different output directories): destination for copyfiles should be where the core is built

[sksar]

I have the same problem, on payload 1.0.9.
I just followed exactly as instructed in the docs, but the CSS does not load.

I tried 'styles.css' as well, but no luck.

[mmllc2]

Had the same issue. Just resolved it but not sure which step did it so documenting it here:

• Deleted my node_modules
• Added webpack & webpack-cli to devDependencies
• Added node-sass & sass-loader to dependencies

After I rebuilt, it was working again. My bet is that just deleting node_modules & rebuilding will do the trick.

[falko100]

I can confirm that the problem exists on a clean payload install, but is "resolved" by installing sass and sass-loader.

[twosaturdayscode]

Want to add my experience for future reference, I'm running Remix + Payload join together (using same Express instance) and I wanted to setup two separate tailwindcss config but I couldn't load the generated css.
After installing sass and sass-loader as devDependencies it just worked, it's probably worth adding this info somewhere.