Local@import不会导致文本替换

Question

我已经关注了这个视频和chrissainty/odotnet 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

这是我的postpass命令：

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

啊哈！这是postpass配置。我看错了文件。最初的配置是：

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