为 Laravel Mix 配置 postcss-uncss
Configuring postcss-uncss for Laravel Mix
我正在尝试从我的一个或多个 sass 文件中删除未使用的 css 规则。
研究让我想到 postcss-uncss 作为删除未使用 css 的最佳选择,如果您不使用服务器端呈现(请参阅: https://www.purgecss.com/comparison)
https://github.com/uncss/postcss-uncss
现在,postcss-uncss 是 uncss 的包装器:https://github.com/uncss/uncss
但是,uncss 文档让我感到困惑,这里的示例配置没有用:https://github.com/uncss/postcss-uncss#example-configuration
如何为 Laravel Mix 配置 postcss-uncss?
这是我目前所拥有的:
mix.js('resources/js/app.js', 'public/js')
.options({
processCssUrls: false,
postCss: [
require('postcss-uncss'),
tailwindcss('./tailwind.config.js')
],
})
我想:
- 告诉它使用哪个 laravel 路由(或者 'all' 也应该没问题)
- 我的 sass / scss 文件所在的位置:/resources/sass/*(示例文件:/resources/sass/app.scss、/resources/sass/admin/admin.scss, 等等)
- 在哪里放置输出,即没有未使用规则的编译(和清理)css:/public/css/*(以便保留相同的结构,例如:/public/app.css, /public/admin/admin.css, 等)
不胜感激。
也许你可以试试 Spatie package?
让我们安装它。
npm i laravel-mix-purgecss
在您的 webpack.mix.js.
中调用 purgeCss()
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.purgeCss({ enabled: true });
这就是我最终所做的(根据我与 Adam Wathan 的对话,事实证明,使用的 purgecss 是比 uncss 更好的选择
let mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
// Removes unused CSS
// According to Discord chat: Running Purge CSS as part of Post CSS is a ton faster than laravel-mix-purgecss
// But if that doesn't work use https://github.com/spatie/laravel-mix-purgecss
const purgecss = require('@fullhuman/postcss-purgecss')({
// Specify the paths to all of the template files in your project
content: [
'./resources/views/*.php',
'./resources/views/**/*.php',
'./resources/js/components/*.vue',
'./resources/js/components/**/*.vue',
],
// Include any special characters you're using in this regular expression
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});
mix.options({
clearConsole: true, // in watch mode, clears console after every build
processCssUrls: false,
postCss: [
//require('tailwindcss'),
tailwindcss('./tailwind.config.js'),
// to enable purgecss on production only
...process.env.NODE_ENV === 'production' ? [purgecss] : []
// to enable on all environments, local and production
//purgecss
],
})
;
我正在尝试从我的一个或多个 sass 文件中删除未使用的 css 规则。
研究让我想到 postcss-uncss 作为删除未使用 css 的最佳选择,如果您不使用服务器端呈现(请参阅: https://www.purgecss.com/comparison)
https://github.com/uncss/postcss-uncss
现在,postcss-uncss 是 uncss 的包装器:https://github.com/uncss/uncss 但是,uncss 文档让我感到困惑,这里的示例配置没有用:https://github.com/uncss/postcss-uncss#example-configuration
如何为 Laravel Mix 配置 postcss-uncss?
这是我目前所拥有的:
mix.js('resources/js/app.js', 'public/js')
.options({
processCssUrls: false,
postCss: [
require('postcss-uncss'),
tailwindcss('./tailwind.config.js')
],
})
我想:
- 告诉它使用哪个 laravel 路由(或者 'all' 也应该没问题)
- 我的 sass / scss 文件所在的位置:/resources/sass/*(示例文件:/resources/sass/app.scss、/resources/sass/admin/admin.scss, 等等)
- 在哪里放置输出,即没有未使用规则的编译(和清理)css:/public/css/*(以便保留相同的结构,例如:/public/app.css, /public/admin/admin.css, 等)
不胜感激。
也许你可以试试 Spatie package?
让我们安装它。
npm i laravel-mix-purgecss
在您的 webpack.mix.js.
中调用 purgeCss()mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.purgeCss({ enabled: true });
这就是我最终所做的(根据我与 Adam Wathan 的对话,事实证明,使用的 purgecss 是比 uncss 更好的选择
let mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
// Removes unused CSS
// According to Discord chat: Running Purge CSS as part of Post CSS is a ton faster than laravel-mix-purgecss
// But if that doesn't work use https://github.com/spatie/laravel-mix-purgecss
const purgecss = require('@fullhuman/postcss-purgecss')({
// Specify the paths to all of the template files in your project
content: [
'./resources/views/*.php',
'./resources/views/**/*.php',
'./resources/js/components/*.vue',
'./resources/js/components/**/*.vue',
],
// Include any special characters you're using in this regular expression
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});
mix.options({
clearConsole: true, // in watch mode, clears console after every build
processCssUrls: false,
postCss: [
//require('tailwindcss'),
tailwindcss('./tailwind.config.js'),
// to enable purgecss on production only
...process.env.NODE_ENV === 'production' ? [purgecss] : []
// to enable on all environments, local and production
//purgecss
],
})
;