Рубрики
Без рубрики

Флэк + хвостовые ветки + колбные активы

Продолжая от предыдущей статьи «Начало работы с колбой», создавая веб-сайт всегда требует … помечен на Python, Flask, Tailwindcss.

Продолжая от предыдущей статьи «Начало работы с Flask», создание веб-сайта всегда требует активов, таких как CSS и файлы JavaScript. Для управления этими файлами в приложении Flask легко … вам просто нужно использовать пакет Flask-Acsets. Хотите знать, как это сделать? Давайте катимся. Как всегда, эта статья сделана основана на предположении, что вы создаете свой проект с помощью Pycharm.

Установка

Установка флэк-активов

Во-первых, вам нужно установить флаб-активы в вашу виртуальную среду с синтаксисом ниже. Вот и все!

pip install Flask-Assets

Установка TailWindcss.

Далее мы собираемся установить Tailwindcsss:

npm install tailwindcss postcss postcss-cli autoprefixer @fullhuman/postcss-purgecss

Для того, чтобы настроить резьбу в нашем проекте, нам нужно создать файл failwind.config.js Запустив этот внутренний терминал.

npx tailwind init

Далее нужно добавить postcss.config.js И вставьте этот код ниже:

// postcss.config.js

const path = require('path');

module.exports = (ctx) => ({
  plugins: [
    require('tailwindcss')(path.resolve(__dirname, 'tailwind.config.js')),
    require('autoprefixer'),
    process.env.FLASK_PROD === 'production' && require('@fullhuman/postcss-purgecss')({
      content: [
        path.resolve(__dirname, 'templates/**/*.html')
      ],
      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
    })
  ],
});

Затем добавьте следующий код в Статические/SRC/Main.css :

/* static/src/main.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

Здесь мы определили все классы базы, компонентов и коммунальных услуг от CSS Tailwind. PostCSS построит все классы в целевое место, Static/dist/main.css Отказ Вам не нужно создавать файл Static/dist/main.css Поскольку этот файл будет автоматически сгенерирован при запуске приложения.

Следующее, что нужно сделать, это импортировать флэк-активы в APP.PY и использовать конструктор Bundle и Environment, чтобы подключить и зарегистрировать все файлы CSS/JS. Вы можете увидеть реализацию ниже.

# app.py

from flask import Flask
from flask_assets import Bundle, Environment

app = Flask(__name__)

# Bundling src/main.css files into dist/main.css'
css = Bundle('src/main.css', output='dist/main.css', filters='postcss')

assets = Environment(app)
assets.register('main_css', css)
css.build()

Наконец, вы можете запустить приложение, чтобы увидеть, стоит ли Static/dist/main.css генерируется должным образом. Если нет, и если вы получите ошибку, как это:

Program file not found: postcss

Затем попробуйте установить PostCSS во всем мире:

npm install --global postcss postcss-cli

Использование Tailwindcss в HTML

Поскольку все было сделано правильно, теперь пришло время использовать хвостовую ветку внутри наших файлов шаблонов. Давайте создадим новый файл шаблона, называемый base.html и внутри этого файла мы поставили:






  
    
    
    

    {% assets 'main_css' %}
      
    {% endassets %}

    Flask + TailwindCSS + Flask-Assets
  
  
    {% block content %}
    {% endblock content %}

Есть несколько новых кодов, которые отличаются от того, что это:

{% assets 'main_css' %}
  
{% endassets %}

В этом коде Main_CSS – это имя пакета CSS, который был зарегистрирован с использованием активов Flask. Это все, что нам нужно обратить внимание. Остальная часть синтаксиса может быть оставлена как по умолчанию.

После этого все классы CSS принадлежат Hatswind внутри файла HTML, как этот:


    
About Page

Как насчет любых файлов JS?

Те же принципы могут использоваться для JS … Вам просто нужно подключить их, зарегистрировать его в качестве активов, а затем называть его внутри HTML-страницы.

Веселиться пытаться …

Оригинал: “https://dev.to/ffpaiki/flask-tailwindcss-flask-assets-51mo”

Читайте ещё по теме: