参考文章:
当您在Flask项目中使用SCSS时，建议将SCSS文件（.scss）放在您的应用程序的静态目录中，并将编译后的CSS文件（.css）放在同一目录下。您可以使用Flask-Assets或其他SCSS编译器来生成这些CSS文件。
在此之前先安装：
pip install pyscss
pip install Flask-Assets
以下是一个示例目录结构，其中包含一个Flask应用程序和SCSS文件：
myapp/
├── static/
│ ├── css/
│ ├── js/
│ ├── images/
│ ├── scss/
│ │ └── main.scss
│ └── index.html
└── templates/
└── base.html
在这个例子中，我们将SCSS文件放在静态目录的scss文件夹中。该文件夹包含一个名为main.scss的文件，其中包含我们的SCSS样式代码。
我们可以使用Flask-Assets将这些SCSS文件编译为CSS文件并存储在同一目录中。以下是一个示例代码：
from flask import Flask
from flask_assets import Environment, Bundle
app = Flask(__name__)
assets = Environment(app)
# 设置静态文件URL和目录
app.config['STATIC_URL_PATH'] = '/static'
app.config['STATIC_FOLDER'] = 'static'
# 初始化Flask-Assets
assets.url = app.config['STATIC_URL_PATH']
assets.directory = app.config['STATIC_FOLDER']
# 编译并注册scss_all bundle
scss_all = Bundle('scss/main.scss', output='css/main.css', filters='pyscss')
assets.register('scss_all', scss_all)
if __name__ == "__main__":
assets.init_app(app)
app.run(debug=True)
在这个例子中，我们使用Bundle()方法创建了一个新的Bundle对象，其中包括我们的main.scss文件，以及指定输出文件路径和SCSS编译过滤器。使用register()方法将该Bundle对象注册到Flask-Assets中。
在您的HTML文件中，您可以使用url_for()方法获取CSS文件的URL，并将其添加到HTML页面中：
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
{% assets"scss_all" %}
<link rel=stylesheet type=text/css href="{{ ASSET_URL }}">
{% endassets %}
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
1040
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
