时间戳

首页 > 解决方案 > 顺风 CSS 的某些部分无法在生产中运行

reactjs - 顺风 CSS 的某些部分无法在生产中运行

问题描述

我为我的下一个 JS 应用程序构建了一个静态网站，该应用程序使用 tailwind CSS 进行样式设置。我将静态用作 CDN。开发服务器（本地主机）中的网站运行良好。但是，在生产中，样式的某些部分似乎被破坏了（准确地说是页眉、页脚以及在暗/亮模式之间切换）。附上截图供参考。
本地服务器： 在此处输入图像描述

生产： 在此处输入图像描述

当我检查本地和生产环境中的相应元素时，HTML 结构和类名似乎没有区别，但是当我将鼠标悬停在生产中损坏的元素（本例中为导航项）上时，相应的元素没有突出显示。到目前为止，这是我能够找到的。以下是一些配置文件
next.config.js：

const isProd = process.env.NODE_ENV === 'production'
module.exports = {
  reactStrictMode: true,
  
  images: {
    // domains: ['raw.githubusercontent.com','ibb.co'],
    domains: ['raw.githubusercontent.com'],
    loader:'imgix',
    path:''
  },
  assetPrefix: isProd ? 'CDN_LINK_HERE' : '',
}

tailwind.config.css：

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

我该如何解决这个问题？谢谢。

标签： reactjsnpmnext.jsimage-optimizationstatic-web-apps

解决方案

确保将需要应用 CSS 的完整路径列表添加到tailwind.config.css.

module.exports = {
// ▼ here you need to add all paths according to your needs
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './your-other-component-folder/**/*.{js,ts,jsx,tsx}'], 
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

推荐阅读