PurgeCSS 移除第三方库 css - Laravel Mix / TailwindCSS答案

【问题标题】：PurgeCSS removes third party library css - Laravel Mix / TailwindCSSPurgeCSS 移除第三方库 css - Laravel Mix / TailwindCSS
【发布时间】：2020-07-20 04:31:36
【问题描述】：

我在使用自定义 CSS 以及一些第三方库的现有应用程序中安装了 TailwindCSS 和 PurgeCSS。我将 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)之前添加了这个sn-p

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()

【问题讨论】：

这是什么mix.webpackConfig(require("./webpack.parts"));？
@AndySong 它创建别名以便我可以更轻松地导入文件，例如，我可以使用 path.resolve 而不是 ../../../components/foo.js 来执行 @components/foo.js

标签： laravel webpack laravel-mix postcss tailwind-css

【解决方案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]
    : []
  ])

【讨论】：

奇怪，它似乎从我的 app.scss 中删除了引导相关的类，因为 app.scss 具有引导的导入