我正在使用 TailwindCSS 和 Laravel Mix。我正在嘗試設(shè)置 PurgeCSS，我讓它讀取了我的模板文件（使用 WordPress）并清除了模板文件之外的所有 CSS。但是，作為 Tailwind 的一部分，我@apply在我的 scss 文件中使用了我正在應(yīng)用的那些實(shí)用程序也被清除了，這使我的站點(diǎn)無(wú)法正常運(yùn)行。我的 sass 文件在css/dev其中app.scss，然后有一個(gè)目錄，其中包含更多文件（base, utilities, custom, components）。我的webpack.mix.js文件配置如下：mix.scripts(['js/dev/app.js', 'js/dev/navigation.js', 'js/dev/skip-link-focus-fix.js'], 'js/build/app.js') .sass('css/dev/app.scss', 'css/build') .options({ processCssUrls: false, postCss: [tailwindcss('./tailwind.config.js')], }) .purgeCss({ enabled: mix.inProduction(), // Your custom globs are merged with the default globs. If you need to // fully replace the globs, use the underlying `paths` option instead. globs: [ path.join(__dirname, 'template-parts/*.php'), path.join(__dirname, '*.php'), path.join(__dirname, 'css/dev/*.scss'), path.join(__dirname, 'css/dev/**/*.scss'), ], extensions: ['html', 'js', 'php', 'scss', 'css'], });如您所見(jiàn)，我嘗試設(shè)置 purgeCss 的路徑以查看 css 路徑，但這沒(méi)有用。有誰(shuí)知道如何實(shí)現(xiàn)這一目標(biāo)？
2 回答
慕勒3428872
TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超6個(gè)贊
在Purge 運(yùn)行之前，您正在將 scss 編譯為 css ，因此不需要只清除 main.css（或任何調(diào)用的輸出）的 .scss 文件。
你編譯的類(lèi)名是否完整地存在于你的模板文件中？如果它們與模板中的類(lèi)不是 100% 匹配，那么它們將非常正確地被清除。
犯罪嫌疑人X
TA貢獻(xiàn)2080條經(jīng)驗(yàn) 獲得超4個(gè)贊
問(wèn)題在于 WordPress 類(lèi)沒(méi)有包含在模板文件中，然后被清除。解決方案是切換到使用 UnCSS，這允許我設(shè)置 URLS 以供 UnCSS 訪(fǎng)問(wèn)，并且不會(huì)清除這些頁(yè)面上使用的任何類(lèi)。我還包括了一些標(biāo)準(zhǔn)的 WordPress 課程，我在網(wǎng)上找到了這些課程。
我的最終配置是：
const uncss = require('postcss-uncss');
mix.js('js/dev/app.js', 'js/build/app.js')
.sass('css/dev/app.scss', 'css/build')
.options({
processCssUrls: false,
postCss: [
tailwindcss('./tailwind.config.js'),
...process.env.NODE_ENV === 'production' ? [uncss({
html: [
'./*.php',
'./template-parts/*.php',
'https://www.example.com',
'https://www.example.com/work/',
'https://www.example.com/work/example-project/',
'https://www.example.com/contact/',
'https://www.example.com/blog/',
'https://www.example.com/blog/laravel-php-framework/',
],
ignore: [
'.rtl',
'.home',
'.blog',
'.archive',
'.date',
'.error404',
'.logged-in',
'.admin-bar',
'.no-customize-support',
'.custom-background',
'.wp-custom-logo',
'.alignnone',
'.alignright',
'.alignleft',
'.wp-caption',
'.wp-caption-text',
'.screen-reader-text',
'.comment-list',
'.grecaptcha-badge',
/^search(-.*)?$/,
/^(.*)-template(-.*)?$/,
/^(.*)?-?single(-.*)?$/,
/^postid-(.*)?$/,
/^attachmentid-(.*)?$/,
/^attachment(-.*)?$/,
/^page(-.*)?$/,
/^(post-type-)?archive(-.*)?$/,
/^author(-.*)?$/,
/^category(-.*)?$/,
/^tag(-.*)?$/,
/^tax-(.*)?$/,
/^term-(.*)?$/,
/^(.*)?-?paged(-.*)?$/,
'.animate',
'.animated',
'.bounce',
'.fadeInDown',
'.fadeIn',
'.fadeInUp',
'.jackInTheBox',
]
})] : [],
]
});
我還使用了 UnCSS exclude from purge CSS 注釋?zhuān)?/p>
/* uncss:ignore start */
my css goes here
/* uncss:ignore end */
我最終在我所有的自定義 sass 文件上使用了這個(gè)，除了 tailwind 文件，這樣唯一被清除的選擇器是 tailwind 實(shí)用程序，這為我節(jié)省了大約 300 KB。
添加回答
舉報(bào)
0/150
提交
取消