sass - 使用 Brunch 将 TailwindCSS 添加到 Phoenix

Question

我无法弄清楚如何将不是专门构建用于 brunch 的 npm 包添加到我的 elixir/phoenix 项目中。

我不想做的一件事是手动将文件从 node_modules/ 复制到 vendor/。

如果有人知道如何正确配置 Brunch 以在 Phoenix 应用程序中使用 Tailwind，我们将不胜感激。

Answer 1

对于 Phoenix 1.4，我写了一篇关于如何设置它的博文。 https://equimper.com/blog/how-to-setup-tailwindcss-in-phoenix-1.4这是使用 webpack 和 postcss

创建项目mix phx.new myproject

进入你的 Assets cd assets

添加顺风依赖yarn add -D tailwindcss

初始化 tailwind 主题 ./node_modules/.bin/tailwind init

添加 postcss dep yarn add -D postcss-loader

在/assets中创建一个文件调用postcss-config.js并添加这段代码

module.exports = {
  plugins: [require('tailwindcss')('./tailwind.js'), require('autoprefixer')],
}

在你的 webpack 配置中更改

use: [MiniCssExtractPlugin.loader, 'css-loader']

对于

use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']

最后在你的 app.css 文件中添加那些顺风的东西

@tailwind preflight;
@tailwind components;
@tailwind utilities;