Локальный @import не приводит к подстановке текста

Question

Я следил за этим видео и chrissainty / ondotnet-tailwindcss, чтобы настроить Tailwind с помощью JIT, и я очень счастлив!

Однако я хотел воспользоваться возможностью включения нескольких файлов 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

Но подстановки текста не происходит. Я пробовал это с и без postcss-import в devDependencies из .

На всякий случай я включил содержимое конфигурационных файлов.

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
    }
});