SCSS from root STATIC folder

[DragosMA]

Settings.py

STATIC_ROOT = os.path.join(BASE_DIR, 'static_files/')
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]
STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'sass_processor.finders.CssFinder',
]

MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL = '/media/'

SASS_ROOT = os.path.join(BASE_DIR, 'static_files', 'static')
SASS_PROCESSOR_ROOT = SASS_ROOT

SASS_PROCESSOR_INCLUDE_DIRS = (
    os.path.join(BASE_DIR, 'static_files', 'static'),
    SASS_ROOT
)
SASS_PROCESSOR_ENABLED = True

This is the tree from on of my Django Apps, as you see, there are a lot of scss. In the main scss, i use import for each one.

The problem is that all the apps have the same amount of files, I want to move all the scss files from dashboard folder to static, and call them for each individual app.

So in the end should be just the scss file, which contains the @import static_files/file needed

platform/dashboard
├── admin.py
├── apps.py
├── __init__.py
├── migrations
│   ├── __init__.py
│   └── __pycache__
│       └── __init__.cpython-36.pyc
├── models.py
├── __pycache__
│   ├── admin.cpython-36.pyc
│   ├── __init__.cpython-36.pyc
│   ├── models.cpython-36.pyc
│   └── urls.cpython-36.pyc
├── static
│   ├── style
│   │   ├── dashboard
│   │   │   ├── _alerts.scss
│   │   │   ├── bootstrap
│   │   │   │   └── scss
│   │   │   │       ├── _alert.scss
│   │   │   │       ├── _badge.scss
│   │   │   │       ├── bootstrap-grid.scss
│   │   │   │       ├── bootstrap-reboot.scss
│   │   │   │       ├── bootstrap.scss
│   │   │   │       ├── _breadcrumb.scss
│   │   │   │       ├── _button-group.scss
│   │   │   │       ├── _buttons.scss
│   │   │   │       ├── _card.scss
│   │   │   │       ├── _carousel.scss
│   │   │   │       ├── _close.scss
│   │   │   │       ├── _code.scss
│   │   │   │       ├── _custom-forms.scss
│   │   │   │       ├── _dropdown.scss
│   │   │   │       ├── _forms.scss
│   │   │   │       ├── _functions.scss
│   │   │   │       ├── _grid.scss
│   │   │   │       ├── _images.scss
│   │   │   │       ├── _input-group.scss
│   │   │   │       ├── _jumbotron.scss
│   │   │   │       ├── _list-group.scss
│   │   │   │       ├── _media.scss
│   │   │   │       ├── mixins
│   │   │   │       │   ├── _alert.scss
│   │   │   │       │   ├── _background-variant.scss
│   │   │   │       │   ├── _badge.scss
│   │   │   │       │   ├── _border-radius.scss
│   │   │   │       │   ├── _box-shadow.scss
│   │   │   │       │   ├── _breakpoints.scss
│   │   │   │       │   ├── _buttons.scss
│   │   │   │       │   ├── _caret.scss
│   │   │   │       │   ├── _clearfix.scss
│   │   │   │       │   ├── _float.scss
│   │   │   │       │   ├── _forms.scss
│   │   │   │       │   ├── _gradients.scss
│   │   │   │       │   ├── _grid-framework.scss
│   │   │   │       │   ├── _grid.scss
│   │   │   │       │   ├── _hover.scss
│   │   │   │       │   ├── _image.scss
│   │   │   │       │   ├── _list-group.scss
│   │   │   │       │   ├── _lists.scss
│   │   │   │       │   ├── _navbar-align.scss
│   │   │   │       │   ├── _nav-divider.scss
│   │   │   │       │   ├── _pagination.scss
│   │   │   │       │   ├── _reset-text.scss
│   │   │   │       │   ├── _resize.scss
│   │   │   │       │   ├── _screen-reader.scss
│   │   │   │       │   ├── _size.scss
│   │   │   │       │   ├── _table-row.scss
│   │   │   │       │   ├── _text-emphasis.scss
│   │   │   │       │   ├── _text-hide.scss
│   │   │   │       │   ├── _text-truncate.scss
│   │   │   │       │   ├── _transition.scss
│   │   │   │       │   └── _visibility.scss
│   │   │   │       ├── _mixins.scss
│   │   │   │       ├── _modal.scss
│   │   │   │       ├── _navbar.scss
│   │   │   │       ├── _nav.scss
│   │   │   │       ├── _pagination.scss
│   │   │   │       ├── _popover.scss
│   │   │   │       ├── _print.scss
│   │   │   │       ├── _progress.scss
│   │   │   │       ├── _reboot.scss
│   │   │   │       ├── _root.scss
│   │   │   │       ├── _tables.scss
│   │   │   │       ├── _tooltip.scss
│   │   │   │       ├── _transitions.scss
│   │   │   │       ├── _type.scss
│   │   │   │       ├── utilities
│   │   │   │       │   ├── _align.scss
│   │   │   │       │   ├── _background.scss
│   │   │   │       │   ├── _borders.scss
│   │   │   │       │   ├── _clearfix.scss
│   │   │   │       │   ├── _display.scss
│   │   │   │       │   ├── _embed.scss
│   │   │   │       │   ├── _flex.scss
│   │   │   │       │   ├── _float.scss
│   │   │   │       │   ├── _position.scss
│   │   │   │       │   ├── _screenreaders.scss
│   │   │   │       │   ├── _sizing.scss
│   │   │   │       │   ├── _spacing.scss
│   │   │   │       │   ├── _text.scss
│   │   │   │       │   └── _visibility.scss
│   │   │   │       ├── _utilities.scss
│   │   │   │       └── _variables.scss
│   │   │   ├── _buttons.scss
│   │   │   ├── cards
│   │   │   │   ├── _card-plain.scss
│   │   │   │   ├── _card-profile.scss
│   │   │   │   └── _card-stats.scss
│   │   │   ├── _cards.scss
│   │   │   ├── _checkboxes.scss
│   │   │   ├── _core-bootstrap.scss
│   │   │   ├── _dropdown.scss
│   │   │   ├── _example-pages.scss
│   │   │   ├── _fixed-plugin.scss
│   │   │   ├── _footers.scss
│   │   │   ├── _forms.scss
│   │   │   ├── _headers.scss
│   │   │   ├── _images.scss
│   │   │   ├── _input-group.scss
│   │   │   ├── _misc.scss
│   │   │   ├── mixins
│   │   │   │   ├── _alert.scss
│   │   │   │   ├── _animations.scss
│   │   │   │   ├── _breakpoints.scss
│   │   │   │   ├── _buttons.scss
│   │   │   │   ├── _chartist.scss
│   │   │   │   ├── _colored-shadows.scss
│   │   │   │   ├── _drawer.scss
│   │   │   │   ├── _forms.scss
│   │   │   │   ├── _hover.scss
│   │   │   │   ├── _layout.scss
│   │   │   │   ├── _navbar-colors.scss
│   │   │   │   ├── _navs.scss
│   │   │   │   ├── _sidebar-color.scss
│   │   │   │   ├── _transparency.scss
│   │   │   │   ├── _type.scss
│   │   │   │   ├── _utilities.scss
│   │   │   │   ├── _variables.scss
│   │   │   │   └── _vendor-prefixes.scss
│   │   │   ├── _mixins.scss
│   │   │   ├── _navbar.scss
│   │   │   ├── plugins
│   │   │   │   ├── _animate.scss
│   │   │   │   ├── _chartist.scss
│   │   │   │   └── _perfect-scrollbar.scss
│   │   │   ├── _popover.scss
│   │   │   ├── _popups.scss
│   │   │   ├── _radios.scss
│   │   │   ├── _responsive.scss
│   │   │   ├── _ripples.scss
│   │   │   ├── _sidebar-and-main-panel.scss
│   │   │   ├── _social-buttons.scss
│   │   │   ├── _tables.scss
│   │   │   ├── _tabs.scss
│   │   │   ├── _togglebutton.scss
│   │   │   ├── _tooltip.scss
│   │   │   ├── _type.scss
│   │   │   ├── variables
│   │   │   │   ├── _body.scss
│   │   │   │   ├── _bootstrap-material-design-base.scss
│   │   │   │   ├── _bootstrap-material-design.scss
│   │   │   │   ├── _brand.scss
│   │   │   │   ├── _buttons.scss
│   │   │   │   ├── _card.scss
│   │   │   │   ├── _code.scss
│   │   │   │   ├── _colors-map.scss
│   │   │   │   ├── _colors.scss
│   │   │   │   ├── _custom-forms.scss
│   │   │   │   ├── _drawer.scss
│   │   │   │   ├── _dropdown.scss
│   │   │   │   ├── _forms.scss
│   │   │   │   ├── _layout.scss
│   │   │   │   ├── _list-group.scss
│   │   │   │   ├── _menu.scss
│   │   │   │   ├── _modals.scss
│   │   │   │   ├── _nav.scss
│   │   │   │   ├── _pagination.scss
│   │   │   │   ├── _shadow.scss
│   │   │   │   ├── _snackbar.scss
│   │   │   │   ├── _spacing.scss
│   │   │   │   ├── _state.scss
│   │   │   │   ├── _tables.scss
│   │   │   │   ├── _tooltip.scss
│   │   │   │   └── _type.scss
│   │   │   └── _variables.scss
│   │   ├── dashboard2.scss
│   │   └── dashboard.scss
│   └── vendor
│       ├── core
│       │   ├── bootstrap-design.min.js
│       │   ├── canvasjs.min.js
│       │   ├── jquery.min.js
│       │   └── popper.min.js
│       ├── dashboard.js
│       ├── dashboard.min.js
│       └── plugins
│           ├── bootstrap-notify.js
│           ├── chartist.min.js
│           └── perfect-scrollbar.jquery.min.js
├── templates
│   └── dashboard.html
├── tests.py
├── urls.py

So instead having the same files on each app, I want to move them in the static_files or static folder ( on the root of the django) so I can reduce the absurd number of files.

├── account
├── anthropometrics
├── contactus
├── dashboard
├── documentation
├── existing-conditions
├── exposure
├── platform
├── ingest
├── media
├── profile
├── **static**
├── **static_files**
├── support
├── tasks
├── training
└── venv

I tried to change from the dashboard.scss the import link, but it did not worked, any solutions ?

My dashboard.scss is looking like that

 @import "dashboard/variables";
 @import "dashboard/mixins";
 @import "dashboard/core-bootstrap";

In my html I use

<link href="{% sass_src 'style/dashboard2.scss' %}" rel="stylesheet" type="text/css" />

In the end I want to move the style folder and use it from my ROOT static_files folder. As I think I need to change the sass_src to look for the files in static_files ?

[jrief]

You're putting you bootstrap-files into you project. Don't do that, it's an anti-pattern. Instead, install bootstrap using npm install bootstrap... into your folder node_modules.

Then make your STATIC_ROOT point to a folder outside your project and add

STATICFILES_DIRS = [
    ('node_modules', os.path.join(PROJECT_ROOT, 'node_modules')),
]

additionally add

SASS_PROCESSOR_INCLUDE_DIRS = [
    os.path.join(PROJECT_ROOT, 'node_modules'),
]

[mazulo]

Hi @jrief sorry resurrecting an old issue, but I'm struggling with that for a while with no luck so far. This is my base.html

{% load compress %}
{% load sass_tags %}
{% load static %}

<!DOCTYPE html>
<html>
<head>
    <title>
        {% block title %}{% endblock title %}
    </title>
    <link href="{% sass_src 'styles/main.scss' %}" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>

and that's my main.scss:

@import "vendors/includes";

$susy: (
    columns: 12,
    container: 1168px,
    global-box-sizing: border-box,
    gutter-position: split,
    gutters: 0.25,
);

Inside the vendors/_includes.scss I only have @import "suzy". And below are my static settings:

SASS_PROCESSOR_ROOT = STATIC_ROOT
SASS_PROCESSOR_INCLUDE_DIRS = [
    BASE_DIR.child('frontend'),
    BASE_DIR.child('frontend', 'bower_components'),
]
SASS_PROCESSOR_INCLUDE_FILE_PATTERN = r'^.+\.scss$'

# Directories to find static files
STATICFILES_DIRS = [
    BASE_DIR.child('frontend'),
    BASE_DIR.child('frontend', 'bower_components'),
]

# Static files finding engines
STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'compressor.finders.CompressorFinder',
    'sass_processor.finders.CssFinder',
]

COMPRESS_PRECOMPILERS = [
    ('text/x-scss', 'django_libsass.SassCompiler'),
]

But yet I still get this error when I try to access the page on the browser:

CompileError at /

Error: File to import not found or unreadable: suzy.
        on line 1:1 of frontend/styles/vendors/_includes.scss
        from line 1:1 of frontend/styles/main.scss
>> @import "suzy"

Do you have any idea of what is the issue? Or what I'm doing wrong. Any advice/links are very much appreciated

[jrief]

This btw. is not related to this project.

But, since it's a pure include path finding problem, try to @import "vendors/suzy";. I also would suggest to rename the file to _suzy.scss.