如何将外部CSS导入后风的app.css

Question

我正在尝试使用第三方node_nodules，其中包含我尝试以各种方式导入tailwinds app.cs.cs.css.css的CSS。 Tailwind CSS的东西正在进口和工作正常。

关于我做错了什么的想法？

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

/* DID NOT WORK: */
/* @import '/node_modules/swiper/swiper-bundle.css';
   @import '/node_modules/swiper/swiper-bundle.min.css';
   @import '/node_modules/swiper/swiper.min.css'; */

/* DID NOT WORK: */
/* @import 'swiper/swiper-bundle.css';
   @import 'swiper/swiper-bundle.min.css';
   @import 'swiper/swiper.min.css'; */

/* DID NOT WORK: */
/* @import '~swiper/swiper-bundle.css';
   @import '~swiper/swiper-bundle.min.css';
   @import '~swiper/swiper.min.css'; */

我的post.config.js看起来像这样：

    module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  },
}

当我尝试在remix中进行npm run构建时，它只是将输出作为导入语句的字符串：

Answer 1

不确定是否已经回答，但是我发现使用PostCSS-Import与Tailwind（也使用Remix Vite Spa）解决了我的问题。在Postcss.config.js文件中，请确保您有以下内容：

export default {
    plugins: {
        'postcss-import': {},
        'tailwindcss/nesting': 'postcss-nesting',
        tailwindcss: {},
        autoprefixer: {},
    },
}

从那里开始，请确保您正确设置了您的导入，因为这确实使用了严格的CSS导入，如下所示： https://tailwindcss.com/docs/using-with-preprocessors#build time-imports 。

因此，我的tailwind.css（主要CSS文件）看起来像：

@import "./libraryStyles/tailwindbase.css";
/* 
  Will need to add tailwind components, utilities, etc in separate
  file if we need to use those appropriately
*/
@import "./libraryStyles/remixRootStyle.css"

图书馆风格的文件夹既有尾风基类，又保存着我从混音github中撕下的样式。 tailwindbase.css文件看起来像我的应用程序：

@tailwind base;

@layer base {
    :root {
      --background: 0 0% 100%;
      --foreground: 20 14.3% 4.1%;
  
      --card: 0 0% 100%;
      --card-foreground: 20 14.3% 4.1%;
   
      --popover: 0 0% 100%;
      --popover-foreground: 20 14.3% 4.1%;
   
      --primary: 24 9.8% 10%;
      --primary-foreground: 60 9.1% 97.8%;
   
      --secondary: 60 4.8% 95.9%;
      --secondary-foreground: 24 9.8% 10%;
   
      --muted: 60 4.8% 95.9%;
      --muted-foreground: 25 5.3% 44.7%;
   
      --accent: 60 4.8% 95.9%;
      --accent-foreground: 24 9.8% 10%;
   
      --destructive: 0 84.2% 60.2%;
      --destructive-foreground: 60 9.1% 97.8%;
  
      --border: 20 5.9% 90%;
      --input: 20 5.9% 90%;
      --ring: 20 14.3% 4.1%;
   
      --radius: 0.5rem;
    }
   
    .dark {
      --background: 20 14.3% 4.1%;
      --foreground: 60 9.1% 97.8%;
   
      --card: 20 14.3% 4.1%;
      --card-foreground: 60 9.1% 97.8%;
   
      --popover: 20 14.3% 4.1%;
      --popover-foreground: 60 9.1% 97.8%;
   
      --primary: 60 9.1% 97.8%;
      --primary-foreground: 24 9.8% 10%;
   
      --secondary: 12 6.5% 15.1%;
      --secondary-foreground: 60 9.1% 97.8%;
   
      --muted: 12 6.5% 15.1%;
      --muted-foreground: 24 5.4% 63.9%;
   
      --accent: 12 6.5% 15.1%;
      --accent-foreground: 60 9.1% 97.8%;
   
      --destructive: 0 62.8% 30.6%;
      --destructive-foreground: 60 9.1% 97.8%;
   
      --border: 12 6.5% 15.1%;
      --input: 12 6.5% 15.1%;
      --ring: 24 5.7% 82.9%;
    }
  }
   
  @layer base {
    * {
      @apply border-border;
    }
    body {
      @apply bg-background text-foreground;
    }
  }

Answer 2

只需在input.css中添加一行：

@import '/reset.css';

/* other code */

@tailwind base;
@tailwind components;
@tailwind utilities;