apostrophecms / apostrophe

A full-featured, open-source content management framework built with Node.js that empowers organizations by combining in-context editing and headless architecture in a full-stack JS environment.
https://apostrophecms.com
Other
4.36k stars 590 forks source link

Hashed css file in index.html is out of sync with local generated css file #2742

Closed juliageek closed 3 years ago

juliageek commented 3 years ago

To Reproduce

I have a very strange bug in my project: the css is not loading, and it seems that the browser tries to load a css file that I don't have in my local environment.

Step by step instructions to reproduce the behavior:

  1. My app.js code looks like this:
var path = require('path');

const locales = [
  {
    value: 'ro',
    label: 'Română'
  },
  {
    value: 'en',
    label: 'United States'
  }
]

const defaultLocale = 'en';

var apos = require('apostrophe')({
  shortName: 'test-project',
  modules: {
    'apostrophe-i18n-static': {
      defaultLocale,
      locales,
      namespaces: true,
      ignoreNamespaces: [ 'apostrophe' ]
    },
    'apostrophe-images': {
      enableAltField: true
    },
    'apostrophe-global': {
      faviconDestinationDir: '/fav/'
    },
    'apostrophe-templates': { viewsFolderFallback: path.join(__dirname, '/views') },
    'apostrophe-workflow': {
      alias: 'workflow',
      // Recommended to save database space. You can still
      // export explicitly between locales
      locales: [{
        name: 'default',
        label: 'Default',
        private: true,
        children: locales.map(locale => ({ label: locale.label, name: locale.value }))
      }],
      replicateAcrossLocales: false
     },
    'apostrophe-workflow-modified-documents': {},
    'helpers': { extend: 'apostrophe-module' },
    'link-widgets': {},
    'page-link-widgets': {},
    'my-theme': {},
    'antiquity': { extend: 'apostrophe-blog' },
    'antiquity-pages': { extend: 'apostrophe-pieces-pages' },
    'medieval': { extend: 'apostrophe-blog' },
    'medieval-pages': { extend: 'apostrophe-pieces-pages' },
    'two-panel-widgets': {}
  }
});

I moved all .css and fonts under a module called my-theme. My theme's index.js looks like this:

module.exports = {
  construct: function(self, options) {
    // loads from public/css/site.less of this module
    self.pushAsset('stylesheet', 'site');
  }
};

Until 2 days ago, everything worked just fine, the styles (both the Apostrophe CMS styles on the Login page and my own custom styles) were loading in the browser. I had to leave the project for 2 days and when I came back to it, the styles were kind of... gone. What I mean by "gone" is that the hashed css in the index.html file that is served to the browser and the hashed css file I have in public/css are completely different, and therefore the browser returns a 404 NOT FOUND error.

Expected behavior

I expect the css to load as it did before.

Describe the bug

I expect that the .css is somehow out of sync with the local version of my file. This is because both .css files (the one in the index.html and the local one seem to be changing, but not in sync).

Details

Version of ApostropheCMS: 2.115.0 Version of Node.js: v.15.8.0 Server Operating System: Manjaro Linux

Screenshots Selection_016

juliageek commented 3 years ago

My .less was broken, so that's why my public/css files were not generated at all.