Laravel Mix、TailwindCSS 和 PurgeCSS

Posted 2023-03-06

【中文标题】Laravel Mix、TailwindCSS 和 PurgeCSS

【英文标题】：Laravel Mix, TailwindCSS, and PurgeCSS

【发布时间】：2019-10-23 21:12:38

【问题描述】：

第一次使用 laravel mix，我确定我错过了一些简单的东西。

我有一个项目，我正在尝试使用 Laravel mix 编译 tailwindcss，然后使用 purge 删除任何未使用的 css。

package.json

  "scripts": 
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  ,
  "repository": 
    "type": "git",
    "url": "git+ssh://*******************.git"
  ,
  "author": "Sean Smith",
  "license": "ISC",
  "homepage": "**************",
  "devDependencies": 
    "cross-env": "^5.2.0",
    "laravel-mix": "^4.0.16",
    "laravel-mix-purgecss": "^4.1.0",
    "postcss-easy-import": "^3.0.0",
    "postcss-import": "^12.0.1",
    "postcss-nested": "^4.1.2",
    "postcss-preset-env": "^6.6.0",
    "tailwindcss": "^1.0.3"
  ,
  "dependencies": 
    "cross-env": "^5.2.0",
    "laravel-mix-purgecss": "^4.1.0"
  

webpack.mix.js：

// copied from https://gist.github.com/Log1x/8c1d63024cad15cfb05eec495c41a75b

const mix = require('laravel-mix')
require('laravel-mix-purgecss')

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Sage application. By default, we are compiling the Sass file
 | for your application, as well as bundling up your JS files.
 |
 */

// Public Path
mix.setPublicPath('./public')

// Browsersync
// mix.browserSync('https://example.test')

/**
 * Custom PurgeCSS Extractor
 * https://github.com/FullHuman/purgecss
 * https://github.com/FullHuman/purgecss-webpack-plugin
 */
// Styles
mix.postCss('src/css/styles.css', 'public/assets/css', [
  require('postcss-import')(),
  require('tailwindcss')('./tailwind.config.js'),
  require('postcss-nested')(), 
  require('postcss-preset-env')(),  
]).purgeCss(
    enabled: mix.inProduction(),
    folders: ['src', 'templates'],
    extensions: ['twig','html','js','php', 'vue'],
    extractorPattern: [/[a-zA-Z0-9-:_/]+/g],
  )

// javascript
mix.js('src/js/app.js', 'public/assets/js')
  .extract()

// Source maps when not in production.
if (!mix.inProduction()) 
  mix.sourceMaps()


// Hash and version files in production.
if (mix.inProduction()) 
  mix.version()

当我运行 npm run prod 时，一切似乎都正常工作。然而，在导出的 styles.css 中，唯一的样式来自 tailwind/base

styles.css

/* tailwind base; */
@import "tailwindcss/base";

/* tailwind components; */
@import "tailwindcss/components";

/* tailwind utilities; */
@import "tailwindcss/utilities";

/* all shared css here */
@import "./components/shared.css"

我的 templates/index.twig 文件中的所有类均未添加，./components/shared.css 文件中的样式也未添加。

类同时存在于 index.html 和 shared.css 中，所以应该不被清除

当我删除 purgeCSS 时，输出的 css 文件包含预期的所有内容。然而，当添加清除时，只有输出是顺风/基础 css。

请指教。

这是我的目录结构的截图

【问题讨论】：

我也在为这个 Sean 苦苦挣扎，虽然我的问题是无法让 PurgeCss 正常运行...

【参考方案1】：

当您使用 mix.postCss() 或单独的 postcss.config.js 文件时，Mix 会覆盖所有其他 PostCSS 插件，包括此插件添加的 PurgeCSS 实例。

要解决此问题，请使用 mix.options() 包含您的 PostCSS 插件

  const mix = require('laravel-mix');
  require('laravel-mix-purgecss');

  mix.js('resources/js/app.js', 'public/js')
     .postCss('resources/css/app.css', 'public/css')
     .options(
        postCss: [require('tailwindcss')]
      )
     .purgeCss(
        enabled: mix.inProduction(),
     );

更多详情请参考https://github.com/spatie/laravel-mix-purgecss。

【参考方案2】：

您能告诉我们您的tailwind.config.js 文件吗？ 该文件应该包含类似的内容：

module.exports = 
purge: [
    './vendor/laravel/jetstream/**/*.blade.php',
    './storage/framework/views/*.php',
    './resources/views/**/*.blade.php',
],

theme: 
    extend: 
        lineClamp: 
            10 :"10",
            12 : "12"
        ,
        fontFamily: 
            sans: ['Nunito', ...defaultTheme.fontFamily.sans],
        ,

    ,
,

variants: 
    extend: 
        lineClamp : ["hover"],
        opacity: ['disabled'],
    ,
,

plugins: [require("@tailwindcss/line-clamp"), require('@tailwindcss/forms'), require('@tailwindcss/typography')],
;

purge 数组应包含您要清除的文件。

purge: [
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],

在上面的这个例子中，命令 purge 将清除目录 /vendor/laravel/jetstream/ 和 ** 中的文件，意思是查看 jetstream 下的所有子文件夹，最后 * 表示所有具有 .blade.php 扩展名的文件jetstream 文件夹和文件夹应该被清除

【讨论】：

请将其表述为有条件的解释性答案，以避免给人以澄清问题而不是回答的印象（应该使用评论而不是答案，比较meta.stackexchange.com/questions/214173/…）。例如像“如果你的问题是......那么解决方案是......因为......。”