Laravel Mix, TailwindCSS и PurgeCSS - PullRequest
Новая
       70

Laravel Mix, TailwindCSS и PurgeCSS

0 голосов
/ 08 июня 2019

В первый раз, используя микс laravel, я уверен, что мне не хватает чего-то простого.

У меня есть проект, в котором я пытаюсь использовать микс Laravel для компиляции 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, запустите prod, все будет работать правильно.Однако в экспортированном styles.css единственные стили, которые там есть, взяты из попутного ветра / базы

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"

Ни один из классов, которые есть в моих шаблонах / index.twigфайл не был добавлен, а стили в файле ./components/shared.css отсутствуют.

классы существуют как в index.html, так и в shared.css, поэтому не необходимо очистить

Когда я удаляю purgeCSS , выходной файл css включает все как положено.Однако при добавлении очистки в выводе только попутный ветер / база css .

Пожалуйста, сообщите.

Вот скриншот моей структуры каталогов

enter image description here

...