如何压缩文件大小在顺风使用postcss？

Question

我有以下的邮政编码。配置。js文件：

// postcss.config.js
module.exports = {
    plugins: [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ]
}

以及以下tailwind.config.js文件：

// tailwind.config.js
module.exports = {
    purge: [
        './src/cljs/foo/*.cljs',
        './target/cljs-runtime/*.js',
        './target/cljsbuild/public/js/*',
        './target/cljsbuild/public/js/cljs-runtime/*',
        './target/*'
    ],
    theme: {},
    variants: {},
    plugins: [],
}

我的目标是压缩生成的css，为此我在tailwind中添加了purge键。配置。js。

要从. src顺风文件生成css，styles.src.css：

@tailwind base;
@tailwind components;
@tailwind utilities;

我正在运行命令：

postcss ./resources/public/css/styles.src.css -o ./resources/public/css/styles.css

从包含两个tailwind的项目的根目录。配置。js和PostSS。配置。js。但是在运行该命令之后，生成的css是1.2MB，与我没有清除键时的大小一样大。为什么POSTSS清除不起作用？

Answer 1

你也可以在postcss.config.js中添加清除键。

这是我在PostSS中的配置。配置。js

const purgecss = require('@fullhuman/postcss-purgecss')({
  // Specify the paths to all of the template files in your project
  content: ['./src/**/*.js', './public/index.html'],

  // make sure css reset isnt removed on html and body
  whitelist: ['html', 'body'],

  // Include any special characters you're using in this regular expression
  defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [], 
})


module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),

    ...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
  ],
}

重要提示：环境变量NODE_ENV负责开发和生产环境。如果在开发模式下使用tailwindcss，则不希望清除，因为您希望使用所有可用样式。通过将其设置为production模式，将通知postsss，从而清除未使用的css。

请注意，我没有在webpack配置中设置任何配置。

在构建时，请确保将您的NODE_ENV设置为生产用例的特定值。您可以使用'生产'或'prod'都没关系。同样会反映在postcss.config.js.

Answer 2

您的POSTSS配置分为顺风。配置。js和邮政编码。配置。js，当它应该全部在postsss中时。配置。js。

为什么？

Tailwind在幕后使用POSTSS。但是PostSS本身并不知道你的顺风。配置。js文件。要使用postsss命令，需要在postsss中指定purge选项。配置。js文件，而不是顺风。配置。js。Tailwind网站上的这个页面详细解释了这两个文件之间的区别。

以下是我的设置：

// postcss.config.js
module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
        require('@fullhuman/postcss-purgecss')({
            // Specify the paths to all of the template files in your project
            content: [
              './src/cljs/foo/*.cljs',
              './target/cljs-runtime/*.js',
              './target/cljsbuild/public/js/*',
              './target/cljsbuild/public/js/cljs-runtime/*',
              './target/*'
            ],
            // This extractor will tell PurgeCSS to ignore all CSS selectors and tags used in your files
            defaultExtractor: content => Array.from(content.matchAll(/:?([A-Za-z0-9-_:]+)/g)).map(x => x[1]) || []
        }),
    ]
}

注意我的tailwind.config.js文件是空的：

// tailwind.config.js
module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Answer 3

您不需要使用postcss的命令。

只需将启用：true添加到顺风吹扫中即可。配置。json并将您的路径包装到列表中，如中所述https://tailwindcss.com/docs/optimizing-for-production#enabling-手动：

  purge: {
    enabled: true,
    content: [
        './src/cljs/foo/*.cljs',
        './target/cljs-runtime/*.js',
        './target/cljsbuild/public/js/*',
        './target/cljsbuild/public/js/cljs-runtime/*',
        './target/*'
    ],
  },

它在那里！现在您可以运行并查看结果：

npm run build:css

这是我在包中使用的命令。json：

"scripts": {
    "build:css": "tailwind build static/css/tw.css -o static/css/tailwind.css"
  },