提问者:小点点

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


我有以下的邮政编码。配置。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清除不起作用?


共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"
  },

匿名用户

您的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: [],
}

匿名用户

你也可以在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.