I'm trying to add the Materialize source to a Django project. In my stylesheets directory, I have the following structure:
(venv) Kurts-MacBook-Pro-2:lucy kurtpeek$ tree lucy-web/lucy_web/static/stylesheets
lucy-web/lucy_web/static/stylesheets
├── mixins.scss
├── terms_of_use.scss
└── vendor
├── components
│ ├── _badges.scss
│ ├── _buttons.scss
│ ├── _cards.scss
│ ├── _carousel.scss
│ ├── _chips.scss
│ ├── _collapsible.scss
│ ├── _color-classes.scss
│ ├── _color-variables.scss
│ ├── _datepicker.scss
│ ├── _dropdown.scss
│ ├── _global.scss
│ ├── _grid.scss
│ ├── _icons-material-design.scss
│ ├── _materialbox.scss
│ ├── _modal.scss
│ ├── _navbar.scss
│ ├── _normalize.scss
│ ├── _preloader.scss
│ ├── _pulse.scss
│ ├── _sidenav.scss
│ ├── _slider.scss
│ ├── _table_of_contents.scss
│ ├── _tabs.scss
│ ├── _tapTarget.scss
│ ├── _timepicker.scss
│ ├── _toast.scss
│ ├── _tooltip.scss
│ ├── _transitions.scss
│ ├── _typography.scss
│ ├── _variables.scss
│ ├── _waves.scss
│ └── forms
│ ├── _checkboxes.scss
│ ├── _file-input.scss
│ ├── _forms.scss
│ ├── _input-fields.scss
│ ├── _radio-buttons.scss
│ ├── _range.scss
│ ├── _select.scss
│ └── _switches.scss
├── materialize_v1.scss
where materialize_v1.scss and components are downloaded from the source version available at http://materializecss.com/getting-started.html; I've renamed materialize.scss to materialize_v1.scss to avoid name collision with a legacy version.
In terms_of_use.scss, I import materialize as follows:
@import "vendor/materialize_v1"; // Materialize v1.0.0beta
In the template, I'm using compress and sass_src tags as follows:
{% load compress %}
{% load sass_tags %}
<html>
<head>
{% compress css %}
<link href="{% sass_src 'stylesheets/vendor/materialize_v1.scss' %}" rel="stylesheet" type="text/css" />
<link href="{% sass_src 'stylesheets/terms_of_use.scss' %}" rel="stylesheet" type="text/css" />
{% endcompress %}
On my local machine in development mode (with DEBUG = True), everything seems to work fine. However, when I try to deploy to Heroku, I get the following error:
(venv) Kurts-MacBook-Pro-2:lucy kurtpeek$ git push staging `git subtree split --prefix lucy-web terms-of-service`:master --force
cache for 09dc1ce7e3b490f30ceeabbca0c9375e2013b596 already exists!
Counting objects: 4188, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (1430/1430), done.
Writing objects: 100% (4188/4188), 1.22 MiB | 938.00 KiB/s, done.
Total 4188 (delta 3084), reused 3590 (delta 2687)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Python app detected
remote: -----> Installing requirements with pip
remote: Obtaining django_airbrake from git+https://github.com/airbrake/airbrake-django.git@02b0b422c6cdc8d5727bd6ea045bfdc362b380cd#egg=django_airbrake (from -r /tmp/build_64226978df3aac094d9ae50e59da9e58/requirements.txt (line 9))
remote: Cloning https://github.com/airbrake/airbrake-django.git (to 02b0b422c6cdc8d5727bd6ea045bfdc362b380cd) to /app/.heroku/src/django-airbrake
remote: Could not find a tag or branch '02b0b422c6cdc8d5727bd6ea045bfdc362b380cd', assuming commit.
remote: Installing collected packages: django-airbrake
remote: Found existing installation: django-airbrake 0.0.2
remote: Running setup.py develop for django-airbrake
remote: Successfully installed django-airbrake
remote:
remote: -----> Running post-compile hook
remote: -----> $ python manage.py compilescss
remote: ................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................Traceback (most recent call last):
remote: File "manage.py", line 29, in <module>
remote: execute_from_command_line(sys.argv)
remote: File "/app/.heroku/python/lib/python3.6/site-packages/django/core/management/__init__.py", line 364, in execute_from_command_line
remote: utility.execute()
remote: File "/app/.heroku/python/lib/python3.6/site-packages/django/core/management/__init__.py", line 356, in execute
remote: self.fetch_command(subcommand).run_from_argv(self.argv)
remote: File "/app/.heroku/python/lib/python3.6/site-packages/django/core/management/base.py", line 283, in run_from_argv
remote: self.execute(*args, **cmd_options)
remote: File "/app/.heroku/python/lib/python3.6/site-packages/django/core/management/base.py", line 330, in execute
remote: output = self.handle(*args, **options)
remote: File "/app/.heroku/python/lib/python3.6/site-packages/sass_processor/management/commands/compilescss.py", line 160, in handle
remote: self.parse_template(template_name)
remote: File "/app/.heroku/python/lib/python3.6/site-packages/sass_processor/management/commands/compilescss.py", line 271, in parse_template
remote: self.compile_sass(sass_filename, node.path)
remote: File "/app/.heroku/python/lib/python3.6/site-packages/sass_processor/management/commands/compilescss.py", line 289, in compile_sass
remote: content = sass.compile(**compile_kwargs)
remote: File "/app/.heroku/python/lib/python3.6/site-packages/sass.py", line 640, in compile
remote: raise CompileError(v)
remote: sass.CompileError: Error: It's not clear which file to import for '@import "vendor/materialize_v1"'.
remote: Candidates:
remote: vendor/materialize_v1.scss
remote: vendor/materialize_v1.css
remote: Please delete or rename all but one of these files.
remote: on line 1 of lucy_web/static/stylesheets/terms_of_use.scss
remote: >> @import "vendor/materialize_v1"; // Materialize v1.0.0beta
remote: ^
remote:
remote:
remote: ! Error while running '$ python manage.py compilescss'.
remote: See traceback above for details.
remote:
remote: ! Push rejected, failed to compile Python app.
remote:
remote: ! Push failed
remote: Verifying deploy...
remote:
remote: ! Push rejected to lucy-staging.
remote:
To https://git.heroku.com/lucy-staging.git
! [remote rejected] 34560aaa9267f49d1e6042390e203efe9d275def -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/lucy-staging.git'
It seems like the compilescss command is first compiling materialize_v1.scss into materialize_v1.css, after which it becomes ambiguous which one I mean when I @import it in terms_of_use.scss.
Does this sound like what is happening? How can I make it so that the ambiguity is removed?
You should rename vendor/materialize_v1.scss to vendor/_materialize_v1.scss. This prevents the compilation of files intended for inclusion into other scss files.
Further, it doesn't make sense to refer to vendor/materialize_v1.scss from HTML and later on, include that file a second time into stylesheets/terms_of_use.scss. Therefore the best approach is to also remove the first reference in HTML, ie. <link href="{% sass_src 'stylesheets/vendor/materialize_v1.scss' %}" rel="stylesheet" type="text/css" /> and purely rely on the @import-statement in stylesheets/terms_of_use.scss.