构建时从消费项目访问Razor类库静态资源及CSS合并方案咨询

关于RCL静态资源的访问 #

导入RCL到Blazor/MVC应用后，完全可以访问RCL的静态资源。默认情况下，RCL的wwwroot目录下的资源会被嵌入到程序集中，主应用可通过_content/[RCL程序集名称]/资源相对路径的格式直接引用。但默认模式下，RCL的CSS会作为独立文件加载，无法自动合并到主应用的CSS中，需要额外配置实现合并或统一构建。

针对TailwindCSS的重复样式解决方案 #

结合你提到的场景（主应用与RCL均使用TailwindCSS，希望避免重复样式下载），以下两种方案可实现目标：

方案一：统一由主应用的TailwindCSS扫描所有文件（推荐） #

这种方式能彻底避免重复，让TailwindCSS只生成一份包含所有用到的样式类的CSS文件：

• 在主应用的tailwind.config.js中，修改content配置，将RCL的相关文件路径加入扫描范围，示例配置：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./**/*.{razor,html,js,css}",
      "./../YourRCLProjectName/**/*.{razor,html,js,css}" // 替换为你的RCL项目路径
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 移除RCL自身的TailwindCSS构建流程，将RCL中自定义的Tailwind样式（如@layer规则、自定义工具类）整理为单独的CSS文件，在主应用的入口CSS文件中通过@import引入。
• 主应用正常执行TailwindCSS构建，生成的CSS会自动包含主应用与RCL中所有被实际使用的样式类，且Tailwind会自动去重，不会产生重复代码。

方案二：合并主应用与RCL的CSS文件（适用于RCL需保留独立构建的场景） #

如果RCL必须保留自身的Tailwind构建流程，可通过构建工具合并CSS并去重：

• 配置RCL将构建后的CSS文件输出到主应用可访问的目录（如主应用的wwwroot/css下），或保持嵌入式资源，通过路径引用。
• 使用构建工具（如Gulp、Webpack，或.NET的MSBuild目标）将主应用的CSS与RCL的CSS合并为单个文件。
• 借助CSS压缩工具（如cssnano）对合并后的文件进行去重、压缩处理，减少最终文件体积。

注意事项 #

• 配置路径时需根据实际项目结构调整，确保TailwindCSS能扫描到RCL的所有相关文件。
• 如果RCL有自定义的Tailwind配置（如主题扩展、插件），需将这些配置合并到主应用的tailwind.config.js中，避免样式不一致。
• 构建完成后需测试页面样式，确保所有RCL组件的样式正常加载，无遗漏或冲突。

内容的提问来源于stack exchange，提问作者Adam Stapleton