PurgeCSS删除第三方库css-Laravel Mix/TailwindCSS

Question

我安装了TailwindCSS&在使用自定义CSS以及一些第三方库的现有应用程序中清除CSS。我将PurgeCSS配置为只清除单个顺风文件，但由于某种原因，它从第三方库中删除了css选择器，也许我的配置是错误的：

webpack.mix.js

const mix         = require("laravel-mix");
const purgeCss    = require("@fullhuman/postcss-purgecss")
const tailwindCss = require("tailwindcss")
mix.webpackConfig(require("./webpack.parts"));
// Don't want to purge anything under app.scss, it contains custom css &
// current app related stuff
mix.sass("resources/sass/app.scss", "public/css").version();
// I simply want to add tailwind so I can use it in addition to whatever
// css the app currently uses
mix.postCss("resources/sass/tailwind.pcss", "public/css", [
tailwindCss,
...process.env.NODE_ENV === "production" ? [purgeCss(
{
content: [
"./resources/**/*.js",
"./resources/**/*.blade.php",
],
css: [
"./public/css/tailwind.css"
]
}
)] : []
])

尝试将css路径从./public/css/tailwind.css更改为./resources/sass/tailwind.pcss，但对没有帮助

编辑：似乎我必须从app.scss中移出一些依赖项导入才能使其工作，尽管我不确定原因：

在mix.sass(app.scss)之前添加了此片段

mix.styles(
[
"./node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css",
"./node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.standalone.css",
"./node_modules/animate.css/animate.css",
"./node_modules/react-datepicker/dist/react-datepicker.css",
],
"public/css/vendors.css"
).version()

Answer 1

我无法重现您的错误，这段代码对我来说非常适用。

const mix = require('laravel-mix');
const purgecss = require('@fullhuman/postcss-purgecss')({
content: [
'resources/**/*.blade.php',
],
defaultExtractor: content => content.match(/[w-/:]+(?<!:)/g) || []
})
mix.sass('resources/sass/app.scss', 'public/css').version();

mix.postCss('resources/sass/tailwind.pcss', 'public/css', [
require('tailwindcss'),
...process.env.NODE_ENV === 'production'
? [purgecss]
: []
])