[英]Tailwind with Flask-assets - build error with postcss
I installed POSTCSS and Flask assets into my build and want to use tailwind.我在我的构建中安装了 POSTCSS 和 Flask 资产并想使用顺风。 My environment is the WSL Unbuntu on windows 11 so all is in a Unbuntu Shell我的环境是 windows 11 上的 WSL Unbuntu 所以一切都在 Unbuntu Shell
I installed Flask-assets我安装了 Flask-assets
# CSS Build
assets = Environment(app)
css = Bundle("src/style.css", output="dist/main.css", filters="postcss")
assets.register("css", css)
css.build()
I have my 'src/styles.css` and it looks like so:我有我的“src/styles.css”,它看起来像这样:
@tailwind base;
@tailwind components;
@tailwind utilities;
And my tailwind config looks like this:我的顺风配置如下所示:
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) || []
})
],
});
I have no build errors or anything causing issues but my 'dist/main.css' is outputting like so:我没有构建错误或任何导致问题的东西,但我的“dist/main.css”输出如下:
@tailwind base;
@tailwind components;
@tailwind utilities;
/*# sourceMappingURL=data:application/json;base64, etc etc
As you can see its not building out correctly and Im not sure where I went wrong.正如你所看到的,它没有正确构建,我不确定我哪里出错了。 I installed with npm the following for postcss我为 postcss 安装了 npm 以下
npm install tailwindcss postcss postcss-cli autoprefixer @fullhuman/postcss-purgecss
and I followed this guide as I'm new to tailwind https://testdriven.io/blog/flask-htmx-tailwind/我遵循本指南,因为我是顺风https://testdriven.io/blog/flask-htmx-tailwind/的新手
If anyone can shed some light on the issue id be very happy如果有人能对这个问题有所了解,我会非常高兴
So it would seem using a postcss.config.js did the trick for getting assets to build因此,似乎使用 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) || []
})
],
});
The example says you need to run该示例说您需要运行
tailwindcss -i ./static/src/main.css -o ./static/dist/main.css --minify
You've done that part or did flask-assets automate the whole process for you?你已经完成了那部分,还是烧瓶资产为你自动化了整个过程?
The example actually says that tailwind should look like this:这个例子实际上说顺风应该是这样的:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./zephyr/templates/**/*.html',],
theme: {
extend: {},
},
plugins: [],
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.