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文件中的样式也未添加。

classs同时存在于index.html和shared.css中，因此应该不清除

当我删除purgeCSS 时，输出的css文件包含了所有预期的内容。但是在添加清除时中，仅输出是顺风/基本CSS 。

请告知。

这是我的目录结构的屏幕截图

Answer 1

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

要变通解决此问题，请将您的PostCSS插件包含在mix.options（）

中

  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: [
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],

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

Answer 3

您应该尝试像下面那样更改文件夹

package.json

"devDependencies": {
  "axios": "^0.19",
  "bootstrap": "^4.0.0",
  "cross-env": "^7.0",
  "jquery": "^3.2",
  "laravel-mix": "^5.0.1",
  "laravel-mix-purgecss": "^4.2.0",
  "lodash": "^4.17.13",
  "popper.js": "^1.12",
  "resolve-url-loader": "^2.3.1",
  "sass": "^1.20.1",
  "sass-loader": "7.*",
  "vue": "^2.5.17",
  "vue-template-compiler": "^2.6.10"
},
"dependencies": {
  "tailwindcss": "^1.1.4"
}

webpack.mix.js

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

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

mix.js('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css')
  .options({
    processCssUrls: false,
    postCss: [tailwindcss('./tailwind.config.js')],
  }).purgeCss();

资源/sass/app.css

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Laravel Mix，TailwindCSS和PurgeCSS

3 个答案: