Cant import scss file from another folder with Flask-assets and pyscss

Question

I am using scss and flask-assets in my flask app.

Here's my app.py :

from flask_assets import Bundle, Environment
from flask import (Flask, render_template)
import os

app = Flask(__name__)
assets = Environment(app)
assets.url = app.static_url_path
assets.load_paths = [os.path.join(app.static_url_path, 'sass/abstracts')]
print(assets.load_paths)
assets.debug = True
app.debug = True



scss = Bundle('sass/abstracts/_variables.scss',
              'sass/base/_fu.scss',
              filters='pyscss', output='gen/all.css')

assets.register('scss_all', scss)

@app.route('/')
def home():
    return render_template('index.html')

if __name__ == "__main__":
    app.run(host='0.0.0.0')

I am using load_paths to tell flask_assets where to go look for my file. Here's the very basic structure of my project:

My all.css is generated. However when I try to import my _variables.scss from the abstracts folder within my _fu.scss file. Here's what I get :

scss.errors.SassImportError
scss.errors.SassImportError: Couldn't find anything to import: _variables
Extensions: <NamespaceAdapterExtension>, <CoreExtension>, <ExtraExtension>, <FontsExtension>, <CompassExtension>, <BootstrapExtension>
Search path:
  /Users/davidgeismar/code/davidgeismar/quantiops/flask-assets-test/static/sass/base
  /Users/davidgeismar/anaconda3/lib/python3.6/site-packages/scss/sass/frameworks
on line 1 of /Users/davidgeismar/code/davidgeismar/quantiops/flask-assets-test/static/sass/base/_fu.scss

If I then move my variable file into the base folder where _fu.scss is located. It then works.

Here's my _fu.scss file :

@import '_variables';
.tut {
  margin-top: 20px;
  color: $color-orange;
  background-color: $base-color;
}

What am I missing here?

Isn't there something missing to addess the `static` folder inside your `app.py`? — Michael W. Czechowski, Feb 09 '18 at 16:35
@NEXTLEVELSHIT what do you mean ? I have this ```assets.url = app.static_url_path``` that points to /static — David Geismar, Feb 09 '18 at 16:37
Ok, I am not familiar with that, but why aren't you importing your variables inside `_fu.scss`? Just like that: `@import '../abstracts/variables';` — Michael W. Czechowski, Feb 09 '18 at 16:40
scss.errors.SassError: Error parsing block: @import '../abstracts/_variables'; .tut { margin-top: 20px; color: $color-orange; background-color: $base-color; } — David Geismar, Feb 09 '18 at 16:56
Try once without `_` and once with the full file path `../abstracts/_variables.scss`. — Michael W. Czechowski, Feb 09 '18 at 16:59
scss.errors.SassError: Error parsing block: @import '../abstracts/variables'; .tut { margin-top: 20px; color: $color-orange; background-color: $base-color; } — David Geismar, Feb 09 '18 at 17:07
@DavidGeismar have you ever fixed this? I am running into the same kind of issue.. — tvb, Jan 07 '20 at 15:00

score 0 · Answer 1 · answered Apr 16 '21 at 21:34

This is an old question, but I'll try nonetheless...

Do you think that adding the static_url_path and static_folder to your app function would have solved the issue?

    app = Flask(__name__,
                static_url_path='/',
                static_folder='../app/static')

score 0 · Answer 2 · edited May 21 '22 at 12:44

Firstly, if you want to import another SCSS file the name of the file to import must well begins by an underscore but for import you can't do a thing from this examples:

@import '_filename.scss';
@import '_filename';
@import 'filename.scss';

You must do:

@import 'filename';

Secondly, i advise you to create a main SCSS file and import the files that you want in this one. And you need to specify an argument (depends)

Example:

app.py

from flask import Flask, render_template
from flask_assets import Environment, Bundle

app = Flask(__name__)

assets = Environment(app)
# Replace *.scss by a tuple of path to scss files that you import in the main scss. You can also keep it like that so you don't have to worry about importing a new file every time
scss = Bundle('sass/main.scss', filters='pyscss', output='gen/main.css', depends='*.scss') 
assets.register('scss_all', scss)

@app.route('/')
def home():
    return render_template('index.html')

if __name__ == "__main__":
    app.run(host='0.0.0.0')

main.scss

@import 'sass/abstracts/variables';
@import 'sass/base/fu';

_fu.scss and _variables.scss

As you want...

index.html

...
{% assets "scss_all" %}
    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='gen/main.css') }}">
{% endassets %}
...

Cant import scss file from another folder with Flask-assets and pyscss

2 Answers2