"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."
Get the resources you need to start building today
Microsoft chose Payload to tell the world about AI.
CUstom SCSS file not working
Hello,
Currently following the documentation and the guide to add this css line to the admin block of the buildconfig isn't seeming to work.
css: path.resolve(__dirname, 'relative/path/to/stylesheet.scss'),So my payload file has as follows
export default buildConfig({
serverURL: 'http://localhost:3000',
admin: {
user: Users.slug,
css: path.resolve(__dirname, './src/assets/css.scss')
},
try removing the ./
so just src/assets/css.scss
path.resolve combines it so its probably combining to /home/./src/assets/css.scss
instead of /home/src/assets/css.scss
Still isn't adding the file to the page
So left it at src/assets/css.scss. But this is my page structure
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <script defer src="/admin/main.js"></script></head> <body> <div id="app"></div> <div id="portal"></div> </body> </html>oh i forgot config file is within src, try just doing assets/css.scss
Still nothing, hmm.
THe directory and file are present in the src folder also so they defo exist
import { buildConfig } from 'payload/config'; import path from 'path'; // import Examples from './collections/Examples'; import Users from './collections/Users'; export default buildConfig({ serverURL: 'http://localhost:3000', admin: { user: Users.slug, css: path.resolve(__dirname, 'assets/app.scss'), }, collections: [ Users, // Add Collections here // Examples, ], typescript: { outputFile: path.resolve(__dirname, 'payload-types.ts'), }, graphQL: { schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'), }, });This is the full payload.config.ts
Then this is the file structure
if you do yarn build does the scss file show up in dist?
yeah
what are you doing to check if hte scss file is working?
Just some simple css to modify colours on the page.
Trying to modify the colour of the class on the breadcrumbs span
if you look in chrome dev console are you able to see if they styles just got overridden or smth?
Doesn't pick up any styling I've added. Only references the index.scss which assuming is just the default
well it probably gets compiled into 1 css file with webpack
That would make sense, but just isn't picking it up
not able to reproduce it
admin: { user: Users.slug, css: path.join(__dirname, 'assets/styles.scss'), },This is very strange
ya like it should just work
Ive created the blank typescript template from npx create-payload-app so nothing I've done thats different
whats in your app.scss
Ive changed the name and input to match what you used, so body background red and filename styles
try incognito?
maybe its an extension
or cache
Nope, not cached
I be confusion
ya not a clue, what os are you on?
linux
maybe try a backslash? your using path so it shouldn't matter but we looking at longshots here
backslash breaks the string
you would need a double backslash so
assets\\styles.scssNope :/
ya not sure
could you send me your styles.scss
Got it working on a different project, so wonder if setup with the cli has something that I've missed?
A fellow colleague has re-created it.
So with npx create-payload-app, setup a blank typescript project then attempt it, it doesnt work
really?
all i did was
npx create-payload-appspammed enter added styles.scss and the admin config and it worked
what node version?
16.13.1
and npx v9.1.2
So turns out caching does work for blank projects, must just be a one off bug
I just hit this same issue. What did you do to resolve it
@196034894760116224? I'm running Payload inside a Docker container, so I'm not sure if there's something else going on there.
Running the project outside of Docker seems to work fine
Ah, docker is running
serveinstead of
dev
Just reinstall your node_modules
More specifically:
rm -Rf node_modules/.cache
Star
Discord
online
Get dedicated engineering support directly from the Payload team.