Question

import "../styles.css";
import styles from "react-responsive-carousel/lib/styles/carousel.min.css";
import "react-owl-carousel2/lib/styles.css";
import { Provider } from "react-redux";
import store from "../store/store"

function App({ Component, pageProps }) {
  
  return 
  <Provider store={store} ><Component {...pageProps} /></Provider>;
}
export default App;

react-owl-carousel2/lib/styles.css 和样式在生产服务器上不起作用

<块引用>

这是 postcss.config.js

    module.exports = {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
        ...(process.env.NODE_ENV === "production"
          ? {
              "@fullhuman/postcss-purgecss": {
                content: ["./components/**/*.js", "./pages/**/*.js"],
                defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
              }
            }
          : {})
      }
    };

Answer 1

我曾经在一个项目中遇到过同样的问题，当我将它们发布到生产服务器时，某些样式无法正常工作。

所以，试试这个技巧，希望它也适用于你。它是 next.config.js

中的一个小的 webpack 配置

在return语句中添加以下内容：

return {
    webpack: (config) => {
      config.optimization.splitChunks.cacheGroups = {
        common: {
          name: "common",
          chunks: "all",
        },
      };

      return config;
    },
  };

Answer 2

我在 nextjs github 页面上找到了解决方案。这是链接 - https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss

样式导入适用于开发服务器，但不适用于 nextjs 的生产

2 个答案: