Laravel Mix、TailwindCSS 和 PurgeCSS

Question

第一次使用 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。

请指教。

这是我的目录结构的截图

Answer 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。

Answer 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 文件夹和文件夹应该被清除