Local @import不会导致文本替换

Question

我已经按照这个video和chrissainty/ondotnet-tailwindcss来使用JIT配置Tailwind了，我很高兴！

但是，我想利用postcss-import来包含多个css文件。下面是我的app.css的样子：

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

@import "./other.css";

然而，在生成的css中，我看到了为Tailwind生成的代码，但不是为我的other.css生成的代码-它仍然是@import "./other.css"。下面是我的文件夹结构：

./Styles/app.css
./Styles/other.css
./package.json
./postcss.config.js
./tailwind.config.js

这是我的postcss命令：

cross-env TAILWIND_MODE=build postcss ./Styles/app.css -o ./wwwroot/css/app.css

我假设这个问题与当前的工作目录有关？对于我的@import语句，我尝试了以下变体：

@import ./Styles/other.css
@import ../Styles/other.css
@import Styles/other.css

但是文本替换不会发生。我在package.json的devDependencies中尝试过使用和不使用postcss-import。

我已经包含了配置文件的内容，以防万一。

package.json

{
  "scripts": {
    "buildcss:dev": "cross-env TAILWIND_MODE=build postcss --verbose ./Styles/app.css -o ./wwwroot/css/app.css",
    "buildcss:release": "cross-env NODE_ENV=production postcss ./Styles/app.css -o ./wwwroot/css/app.css"
  },
  "devDependencies": {
    "autoprefixer": "10.3.1",
    "cross-env": "7.0.3",
    "cssnano": "^5.0.6",
    "postcss": "8.3.6",
    "postcss-cli": "8.3.1",
    "postcss-import": "^14.0.2",
    "tailwindcss": "2.2.7"
  },
  "dependencies": {
    "@tailwindcss/forms": "^0.3.3"
  }
}

postcss.config.js

// postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss')({

  // Specify the paths to all of the template files in your project
  content: [
    './**/*.html',
    './**/*.razor'
  ],

  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
    ...process.env.NODE_ENV === 'production'
      ? [purgecss]
      : []
  ]
}

tailwind.config.js

module.exports = {
    mode: 'jit',
    purge: [
        './**/*.razor',
        './**/*.cshtml'
    ],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {
            zIndex: {
                '1': '1'
            },
        },
    },
    variants: {
        extend: {
            ringWidth: ['focus'],
            borderWidth: ['focus'],
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
    ],
}

Answer 1

啊哈！这是postcss配置。我看错文件了。初始配置是这样的：

module.exports = ({ env }) => ({
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
        cssnano: env === "production" ? { preset: "default" } : false
    }
});

它缺少postcss-import插件：

module.exports = ({ env }) => ({
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
        'postcss-import': {},
        cssnano: env === "production" ? { preset: "default" } : false
    }
});