Customizing css file in django-oscar using less

Question

I am fairly new to django oscar and only have basic understanding of website front end.

I want to change the styles.css in django oscar. I have tried to change directly in styles.css but somehow when I refresh the localhost detects no changes (default css).

I've tried to change the less file, install npm, install less and change the setting into OSCAR_USE_LESS = True. The localhost didn't even render the css file at all, only the template.

When I write the command make css in root directory, following error occurred even though I've installed less.

make: *** No rule to make target `css'.  Stop.

so I really don't know what is wrong with my setting or installed apps.

Settings are

import os
import oscar

# Path helper - going into /Users/dion/Dev/dioncoffee/x
location = lambda x: os.path.join(
    os.path.dirname(os.path.dirname(os.path.realpath(__file__))), x)

# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/2.1/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '=%*t%wzzw^hs5l2o@oq2ae-*&wde0bko4!hxl%=uqb$!5po$tt'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

from oscar import get_core_apps

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.sites',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.flatpages',
    'django_extensions',

    'compressor',
    #'apps.gateway',     # For allowing dashboard access
    'widget_tweaks',
] + get_core_apps(
      ['apps.promotions']
      )

SITE_ID = 1

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'oscar.apps.basket.middleware.BasketMiddleware',
    'django.contrib.flatpages.middleware.FlatpageFallbackMiddleware',
]

ROOT_URLCONF = 'dioncoffee.urls'

from oscar import OSCAR_MAIN_TEMPLATE_DIR

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [            
            location('dioncoffee/templates'),
            oscar.OSCAR_MAIN_TEMPLATE_DIR,
            ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.template.context_processors.i18n',
                'django.contrib.messages.context_processors.messages',

                'oscar.apps.search.context_processors.search_form',
                'oscar.apps.promotions.context_processors.promotions',
                'oscar.apps.checkout.context_processors.checkout',
                'oscar.apps.customer.notifications.context_processors.notifications',
                'oscar.core.context_processors.metadata',
            ],
        },
    },
]

WSGI_APPLICATION = 'dioncoffee.wsgi.application'

# Database
# https://docs.djangoproject.com/en/2.1/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql_psycopg2',
        'NAME': 'dioncoffee',
        'USER': 'dion',
        'PASSWORD': '',
        'HOST': '127.0.0.1',
        'PORT': '',
    }
}


# Password validation
# https://docs.djangoproject.com/en/2.1/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]

AUTHENTICATION_BACKENDS = (
    'oscar.apps.customer.auth_backends.EmailBackend',
    'django.contrib.auth.backends.ModelBackend',
)

# Internationalization
# https://docs.djangoproject.com/en/2.1/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True

HAYSTACK_CONNECTIONS = {
    'default': {
        'ENGINE': 'haystack.backends.simple_backend.SimpleEngine',
    },
}

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.1/howto/static-files/

# Absolute path to the directory that holds media.
# Example: "/home/media/media.lawrence.com/"
MEDIA_ROOT = location("public/media")

STATIC_ROOT = location('public/static')

# URL that handles the media served from MEDIA_ROOT. Make sure to use a
# trailing slash if there is a path component (optional in other cases).
# Examples: "http://media.lawrence.com", "http://example.com/media/"
MEDIA_URL = '/media/'

STATIC_URL = '/static/'

# /Users/dion/Dev/dioncoffee/static/
STATICFILES_DIRS = (
    location('static'),
)

from oscar.defaults import *

OSCAR_DEFAULT_CURRENCY = 'EUR'

OSCAR_CURRENCY_FORMAT = {
    'USD': {
        'currency_digits': False,
        'format_type': "accounting",
    },
    'EUR': {
        'format': u'#,##0\xa0¤',
    }
}

USE_LESS = True
COMPRESS_ENABLED = False
COMPRESS_PRECOMPILERS = (
('text/less', 'lessc {infile} {outfile}'),
)
COMPRESS_OFFLINE_CONTEXT = {
'STATIC_URL': 'STATIC_URL',
'use_less': USE_LESS,
}

My directory files

And I am using python 3.6.5.

Answer 1

make css is intended only for development on Oscar itself - it will not work in your project. I can't see why the USE_LESS approach would fail if you are in debug mode though.

That said, I think you are better off overriding the CSS rather than relying on USE_LESS which is likely to be removed completely in the future, and is only really intended for development.

You should be able to override the CSS if you are putting in the right place.

If you have your CSS inside an app, then it needs to go inside app_dir/static/oscar/css/style.css and you need to have 'django.contrib.staticfiles.finders.AppDirectoriesFinder' in the STATICFILES_FINDERS setting.

Alternatively if you have a separate directory for static files then you need to include 'django.contrib.staticfiles.finders.FileSystemFinder' in the setting, and also specify STATICFILES_DIRS to tell Django where this directory is.