Like what we’re doing? Star us on GitHub!

CUstom SCSS file not working

IAmRoot
3 months ago
53

instead of /home/src/assets/css.scss

  • Jamie Cee
    3 months ago

    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>
  • IAmRoot
    3 months ago

    oh i forgot config file is within src, try just doing assets/css.scss

  • Jamie Cee
    3 months ago

    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

  • IAmRoot
    3 months ago

    if you do yarn build does the scss file show up in dist?

  • Jamie Cee
    3 months ago

    yeah

  • IAmRoot
    3 months ago

    what are you doing to check if hte scss file is working?

  • Jamie Cee
    3 months ago

    Just some simple css to modify colours on the page.



    Trying to modify the colour of the class on the breadcrumbs span

  • IAmRoot
    3 months ago

    if you look in chrome dev console are you able to see if they styles just got overridden or smth?

  • Jamie Cee
    3 months ago

    Doesn't pick up any styling I've added. Only references the index.scss which assuming is just the default

  • IAmRoot
    3 months ago

    well it probably gets compiled into 1 css file with webpack

  • Jamie Cee
    3 months ago

    That would make sense, but just isn't picking it up

  • IAmRoot
    3 months ago

    not able to reproduce it





      admin: {
        user: Users.slug,
        css: path.join(__dirname, 'assets/styles.scss'),
      },
  • Jamie Cee
    3 months ago

    This is very strange

  • IAmRoot
    3 months ago

    ya like it should just work

  • Jamie Cee
    3 months ago

    Ive created the blank typescript template from npx create-payload-app so nothing I've done thats different

  • IAmRoot
    3 months ago

    whats in your app.scss

  • Jamie Cee
    3 months ago

    Ive changed the name and input to match what you used, so body background red and filename styles

  • IAmRoot
    3 months ago

    try incognito?



    maybe its an extension



    or cache

  • Jamie Cee
    3 months ago

    Nope, not cached



    I be confusion

  • IAmRoot
    3 months ago

    ya not a clue, what os are you on?

  • Jamie Cee
    3 months ago

    linux

  • IAmRoot
    3 months ago

    maybe try a backslash? your using path so it shouldn't matter but we looking at longshots here

  • Jamie Cee
    3 months ago

    backslash breaks the string

  • IAmRoot
    3 months ago

    you would need a double backslash so

    assets\\styles.scss
  • Jamie Cee
    3 months ago

    Nope :/

  • IAmRoot
    3 months ago

    ya not sure



    could you send me your styles.scss

  • Jamie Cee
    3 months ago

    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

  • IAmRoot
    3 months ago

    really?



    all i did was

    npx create-payload-app

    spammed enter added styles.scss and the admin config and it worked



    what node version?

  • Jamie Cee
    3 months ago

    16.13.1



    and npx v9.1.2



    So turns out caching does work for blank projects, must just be a one off bug

  • digi
    3 months ago

    I just hit this same issue. What did you do to resolve it @Jamie Cee ? 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

    serve

    instead of

    dev
  • johnmadrigal_
    3 months ago

    Just reinstall your node_modules

  • thgh
    last month

    More specifically:


    rm -Rf node_modules/.cache
Open the post
Continue the discussion in Discord
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More