webpack 将Tailwind CSS引入ASP.NET核心项目的最佳方法是什么?

tcomlyy6  于 2022-12-13  发布在  Webpack
关注(0)|答案(4)|浏览(115)

特别是,我正在使用Blazor(服务器托管)和ASP.NET Core Preview 8。我尝试使用LibMan添加它,但这似乎更多的是从CDN下载文件。我想在我的构建过程中引入Tailwind。
这是一个我应该使用Webpack之类的东西的情况吗?如果是,我如何使Webpack成为我的构建过程的一部分?

cngwdvgl

cngwdvgl1#

UPDATE 2022

The original answer is still below...
Time has marched on since I originally asked this question. For example, I'm now targeting ES6 on modern browsers without Babel (the main reason why I was using Webpack).
So I thought I might document my current solution (Tailwind cli installed with npm without Webpack)
Assuming you have npm installed (part of node.js ). In the root of your project:

npm init -y

This will create a package.json file. This is what my file looks like:

{
  "name": "holly",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

NB - I made the name lowercase (the folder/project name is "Holly") - I was looking at the file using VS Code and there was a squiggly line!

Next, I install Tailwind:

npm install -D tailwindcss cross-env

I've also added cross-env - this is so I can run the same command on my dev machine (Windows) and in my GitHub Action.
After that, generate the Tailwind config file:

npx tailwindcss init

Which should create a file similar to this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

I'm using ASP.NET Core/Blazor Server. So I set the content property to the following:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./**/*.{razor,cshtml,html}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now that Tailwind is configured, we need an input file for generating the css. In my project, I've created a Styles folder and a file called app.css :

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

The next step is to create some handy npm scripts. This is what my package.json file looks like now:

{
  "name": "holly",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "cross-env": "^7.0.3",
    "tailwindcss": "^3.2.4"
  },
  "scripts": {
    "build": "cross-env NODE_ENV=development ./node_modules/tailwindcss/lib/cli.js -i ./Styles/app.css -o ./wwwroot/css/app.css",
    "watch": "cross-env NODE_ENV=development ./node_modules/tailwindcss/lib/cli.js -i ./Styles/app.css -o ./wwwroot/css/app.css --watch",
    "release": "cross-env NODE_ENV=production ./node_modules/tailwindcss/lib/cli.js -i ./Styles/app.css -o ./wwwroot/css/app.css --minify"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
  • build will be used by Visual Studio in DEBUG mode
  • watch is just handy for on-the-fly updates in dev mode.
  • release is for production

Finally, add the following to your project file ( Holly.csproj in my case):

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>

    <NpmLastInstall>node_modules/.last-install</NpmLastInstall>
  </PropertyGroup>

  <!-- Items removed for brevity --> 

  <Target Name="CheckForNpm" BeforeTargets="NpmInstall">
    <Exec Command="npm -v" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="You must install NPM to build this project" />
  </Target>

  <Target Name="NpmInstall" BeforeTargets="BuildCSS" Inputs="package.json" Outputs="$(NpmLastInstall)">
    <Exec Command="npm install" />
    <Touch Files="$(NpmLastInstall)" AlwaysCreate="true" />
  </Target>

  <Target Name="BuildCSS" BeforeTargets="Compile">
    <Exec Command="npm run build" Condition=" '$(Configuration)' == 'Debug' " />
    <Exec Command="npm run release" Condition=" '$(Configuration)' == 'Release' " />
  </Target>
</Project>

This is based on a tutorial I found written by Chris Sainty (which I can't find at the moment). I did, however, find this rather excellent post by Chris on Adding Tailwind CSS v3 to a Blazor app . Though I think this version avoids the integration with Visual Studio.
Make sure you copy and paste the NpmLastInstall element and the Target elements to their appropriate locations in your .csproj file.
If you're in DEBUG mode, Visual Studio will execute npm run build . If you're in RELEASE mode, it'll execute npm run release . If you've just pulled the repo from the server, Visual Studio should be smart enough to automatically execute npm install . The only thing is, I don't think it'll run npm install when the package.json file has been updated - you'll need to remember to do that manually.
Targeting npm in the .csproj file means that Tailwind will build when the ASP.NET Core project builds. Things will stay consistent - if you hit F5 you know the css is up-to-date! The Tailwind JIT is on by default - so Tailwind build times are negligible and do not add much to the total build time.
One final thing. Because Tailwind css is updated by the Visual Studio project - it means the same thing happens in the cloud. Here's a cut down version of my GitHub Action:

name: production-deployment

on:
  push:
    branches: [ master ]

env:
  AZURE_WEBAPP_NAME: holly
  AZURE_WEBAPP_PACKAGE_PATH: './Holly'
  DOTNET_VERSION: '6.0.x'
  NODE_VERSION: '12.x'

jobs:
  build-and-deploy-holly:
    runs-on: ubuntu-latest
    steps:
      # Checkout the repo
      - uses: actions/checkout@master

      # Setup .NET Core 6 SDK
      - name: Setup .NET Core ${{ env.DOTNET_VERSION }}
        uses: actions/setup-dotnet@v1
        with:
          dotnet-version: ${{ env.DOTNET_VERSION }}

      # We need Node for npm!
      - name: Setup Node.js ${{ env.NODE_VERSION }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ env.NODE_VERSION }}

      # Run dotnet build and publish for holly
      - name: Dotnet build and publish for holly
        env:
          NUGET_USERNAME: ${{ secrets.NUGET_USERNAME }}
          NUGET_PASSWORD: ${{ secrets.NUGET_PASSWORD }}
        run: |
          cd '${{ env.AZURE_WEBAPP_PACKAGE_PATH }}'
          dotnet build --configuration Release /warnaserror
          dotnet publish -c Release -o 'app'

      # Deploy holly to Azure Web apps
      - name: 'Run Azure webapp deploy action for holly using publish profile credentials'
        uses: azure/webapps-deploy@v2
        with:
          app-name: ${{ env.AZURE_WEBAPP_NAME }} # Replace with your app name
          publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE  }} # Define secret variable in repository settings as per action documentation
          package: '${{ env.AZURE_WEBAPP_PACKAGE_PATH }}/app'

The Setup Node.js step ensures that npm is available before the dotnet build command is run. The dotnet build command will trigger the Tailwind build process. Thanks to cross-env the same command will work on a Windows, macOS or Linux machine.
I think that's everything!

Original Answer

After reviewing the information in this SO post . Here's a quick rundown of what I ended up implementing. It's not perfect and it needs some work. But it's a good starting point (without making things too complicated).

Created npm Package

I ran npm init in the root of the solution - this created a package.json file. Based on advice I read, this shouldn't be created underneath a project/sub-folder.

Installed/Configured Webpack

Based on the webpack installation guide , I did the following:

npm install webpack webpack-cli --save-dev

In preparation for my Tailwind setup, I also installed the following (see the webpack.config.js file below for more details):

npm install css-loader postcss-loader mini-css-extract-plugin --save-dev
npm install tailwindcss postcss-import

And here's my webpack.config.js file. Note that it's mainly geared towards processing css with 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'
            })
        ]
    };
};

In the case of css, this will take a single entry point styles.css (which is underneath a sub-folder/project called "Holly") and process it with PostCSS/Tailwind CSS. CSS is broken into separate files, but handled by postcss-import (more on that below). All CSS is compiled into a single file called holly.css .

Managing Multiple CSS Files

I also have a postcss.config.js file in the root of my solution:

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

This configures PostCSS for Tailwind, but also includes postcss-import . In the Webpack config styles.css is the entry point for processing:

@import "tailwindcss/base";
@import "./holly-base.css";

@import "tailwindcss/components";
@import "./holly-components.css";

@import "tailwindcss/utilities";

As per the Tailwind documentation postcss-import module pre-processes the @import statements before applying Tailwind CSS.

Making it Work

Once everything was configured, I added the following scripts to the npm package:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --progress --profile",
    "watch": "webpack --progress --profile --watch",
    "production": "webpack --progress --profile --mode production"
  },

To apply Tailwind to the styles.css file, I ran the following command:

npm run build

It would be nice if I could get Visual Studio to run the above command anytime a file is altered (with a guarantee that it will wait for said compilation when debugging the app) and have Visual Studio show me the errors. But that's another kettle of fish/much more difficult. So I settled on the following workflow.
When I'm debugging on my machine, I run this command in an open terminal:

npm run watch

每当一个.css文件发生变化时,就会生成一个新的holly.css文件,这在应用程序运行时可以正常工作--我只需要在做了更改后刷新页面即可。
生产服务器在Docker容器中运行,所以我最终在Dockerfile中调用了npm run production

# 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

正如您所看到的,构建过程并不像在Visual Studio中点击“开始”按钮那么简单。但是工作流足够简单,团队中的其他成员也可以学习。如果上述工作流出现问题,我将考虑在此时有哪些选择。
接下来我可能会重点讨论删除unused Tailwind CSS
如果有什么不合理的地方或者可以做得更好的地方,请告诉我!

whlutmcx

whlutmcx2#

我最近也问过自己同样的问题,我决定不喜欢项目中的package.json或node_modules目录,因此我创建了一个带有新构建操作的NuGet package
使用这个构建操作,您可以简单地为样式表提供构建操作“TailwindCSS”,在构建过程中,样式表将通过PostCSS进行转换。
欲了解更多详情,您可以看看它的GitHub repo

4c8rllxm

4c8rllxm3#

更新以反映Tailwind实验室内的变更:
创建了一个新的独立CLI,允许在无需安装webpacknodejs / npm的情况下使用CLI。
下载exe(macOS和linux可用),并在proj目录中运行它,就像运行普通的cli一样。
详细信息:https://tailwindcss.com/blog/standalone-cli

krcsximq

krcsximq4#

在提出这个问题的时候,这里给出的答案可能是最好的方法。随着顺风的发展,现在有了替代的方法:
最近我开始使用这种方法,它更容易,而且不需要npm:https://github.com/tesar-tech/BlazorAndTailwind
非常容易的设置和运行的顺风手表在后台工程伟大。

相关问题