0

我已经按照这个视频和chrissinty/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

但是文本替换不会发生。我已经postcss-import在devDependencies.package.json

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

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'),
    ],
}
4

1 回答 1

0

啊哈！这是 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
    }
});
于 2021-07-29T09:52:14.623 回答