Solución:
Después de revisar la información en esta publicación SO. Aquí hay un resumen rápido de lo que terminé implementando. No es perfecto y necesita algo de trabajo. Pero es un buen punto de partida (sin complicar demasiado las cosas).
Paquete npm creado
Yo corrí npm init en la raíz de la solución, esto creó un package.json expediente. Según los consejos que leí, esto no debería crearse debajo de un proyecto / subcarpeta.
Webpack instalado / configurado
Basado en la guía de instalación del paquete web, hice lo siguiente:
npm install webpack webpack-cli --save-dev
En preparación para mi configuración de Tailwind, también instalé lo siguiente (consulte el webpack.config.js archivo a continuación para obtener más detalles):
npm install css-loader postcss-loader mini-css-extract-plugin --save-dev
npm install tailwindcss postcss-import
Y aqui esta mi webpack.config.js expediente. Tenga en cuenta que está principalmente orientado al procesamiento de CSS con Tailwind:
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const bundleFileName="holly";
const dirName="Holly/wwwroot/dist";
module.exports = (env, argv) => {
return {
mode: argv.mode === "production" ? "production" : "development",
entry: ['./Holly/wwwroot/js/app.js', './Holly/wwwroot/css/styles.css'],
output: {
filename: bundleFileName + '.js',
path: path.resolve(__dirname, dirName)
},
module: {
rules: [{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
}]
},
plugins: [
new MiniCssExtractPlugin({
filename: bundleFileName + '.css'
})
]
};
};
En el caso de CSS, esto tomará un único punto de entrada. styles.css (que está debajo de una subcarpeta / proyecto llamado “Holly”) y procesarlo con PostCSS / Tailwind CSS. CSS se divide en archivos separados, pero lo maneja postcss-import (más sobre eso a continuación). Todo CSS se compila en un solo archivo llamado holly.css.
Gestión de varios archivos CSS
También tengo un postcss.config.js archivo en la raíz de mi solución:
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]
}
Esto configura PostCSS para Tailwind, pero también incluye postcss-import. En la configuración de Webpack styles.css es el punto de entrada para el procesamiento:
@import "tailwindcss/base";
@import "./holly-base.css";
@import "tailwindcss/components";
@import "./holly-components.css";
@import "tailwindcss/utilities";
Según la documentación de Tailwind postcss-import módulo preprocesa el @import declaraciones antes de aplicar Tailwind CSS.
Haciendo que funcione
Una vez que todo estuvo configurado, agregué los siguientes scripts al npm paquete:
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack --progress --profile",
"watch": "webpack --progress --profile --watch",
"production": "webpack --progress --profile --mode production"
},
Para aplicar Tailwind al styles.css archivo, ejecuté el siguiente comando:
npm run build
Sería bueno si pudiera hacer que Visual Studio ejecute el comando anterior cada vez que se modifique un archivo (con la garantía de que esperará dicha compilación al depurar la aplicación) y que Visual Studio me muestre los errores. Pero esa es otra olla de pescado / mucho más difícil. Así que me decidí por el siguiente flujo de trabajo.
Cuando estoy depurando en mi máquina, ejecuto este comando en una terminal abierta:
npm run watch
Siempre que cambia un archivo .css, un nuevo holly.css se genera el archivo. Lo cual funciona bien mientras la aplicación se está ejecutando, solo tengo que actualizar la página después de haber realizado un cambio.
El servidor de producción se ejecuta dentro de un contenedor Docker. Así que terminé llamando npm run production en el Dockerfile:
# Latest .NET Core from https://hub.docker.com/_/microsoft-dotnet-core-sdk/ (not the nightly one)
FROM mcr.microsoft.com/dotnet/core/sdk:3.0.100-preview9-disco AS build-env
# Setup npm!
RUN apt-get -y update && apt-get install npm -y && apt-get clean
WORKDIR /app
COPY . ./
# To run Tailwind via Webpack/Postcss
RUN npm install
RUN npm run production
RUN dotnet restore "./Holly/Holly.csproj"
RUN dotnet publish "./Holly/Holly.csproj" -c Release -o out
Como puede ver, el proceso de compilación no es tan simple como presionar el botón “Inicio” en Visual Studio. Pero el flujo de trabajo es lo suficientemente simple para que otros miembros del equipo lo aprendan. Si el flujo de trabajo anterior se vuelve problemático, veré cuáles son mis opciones en ese momento.
Lo siguiente en lo que probablemente me centraré es en eliminar el CSS Tailwind no utilizado
Si hay algo que no tiene sentido o se podría hacer mejor, ¡házmelo saber!
Recientemente me hice la misma pregunta. Decidí que no me gustaba un package.json o el directorio node_modules en el proyecto. Por estas razones, creé un paquete NuGet con una nueva acción de compilación.
Con esta acción de compilación, simplemente puede darle a su hoja de estilo la acción de compilación “TailwindCSS” y durante el proceso de compilación, la hoja de estilo se convertirá a través de PostCSS.
Para obtener más detalles, puede echar un vistazo a su repositorio de GitHub.