本地 @import 不会导致文本替换答案

【问题标题】：Local @import does not result in text substitution本地 @import 不会导致文本替换
【发布时间】：2021-10-04 18:17:44
【问题描述】：

我已经按照 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'),
    ],
}

【问题讨论】：

标签： postcss asp.net-core-5.0 postcss-cli

【解决方案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
    }
});

【讨论】：