Postcss没有从node_modules中的组件中清除顺风样式

Posted 2023-03-06

【中文标题】Postcss没有从node_modules中的组件中清除顺风样式

【英文标题】：Postcss not purging taildwind style from component in node_modules

【发布时间】：2021-04-17 14:19:03

【问题描述】：

我创建了一个自定义组件作为它自己的包，它使用了 tailwind。我还在这个组件上使用了汇总来构建它（并清除未使用的顺风样式），并在该构建文件中将其样式注入头部。

我认为显示源文件或构建文件没有帮助，但为组件汇总构建的文件如下所示：

node_modules/@custom/dist/component-text.esm.js

var css_248z = ".bg-blue-500 \n  --tw-bg-opacity: 1;\n  background-color: rgba(59, 130, 246, var(--tw-bg-opacity))\n\n\n.table \n  display: table\n\n\n* \n  --tw-shadow: 0 0 #0000\n\n\n* \n  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000\n\n\n@-webkit-keyframes spin \n  to \n    transform: rotate(360deg)\n  \n\n\n@keyframes spin \n  to \n    transform: rotate(360deg)\n  \n\n\n@-webkit-keyframes ping \n  75%, 100% \n    transform: scale(2);\n    opacity: 0\n  \n\n\n@keyframes ping \n  75%, 100% \n    transform: scale(2);\n    opacity: 0\n  \n\n\n@-webkit-keyframes pulse \n  50% \n    opacity: .5\n  \n\n\n@keyframes pulse \n  50% \n    opacity: .5\n  \n\n\n@-webkit-keyframes bounce \n  0%, 100% \n    transform: translateY(-25%);\n    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\n            animation-timing-function: cubic-bezier(0.8,0,1,1)\n  \n\n  50% \n    transform: none;\n    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\n            animation-timing-function: cubic-bezier(0,0,0.2,1)\n  \n\n\n@keyframes bounce \n  0%, 100% \n    transform: translateY(-25%);\n    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\n            animation-timing-function: cubic-bezier(0.8,0,1,1)\n  \n\n  50% \n    transform: none;\n    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\n            animation-timing-function: cubic-bezier(0,0,0.2,1)\n  \n\n\n@media (min-width: 640px) \n\n\n@media (min-width: 768px) \n\n\n@media (min-width: 1024px) \n\n\n@media (min-width: 1280px) \n\n\n@media (min-width: 1536px) \n";
styleInject(css_248z);

var Text = function Text(_ref) 
  var children = _ref.children,
      large = _ref.large;

  if (large) 
    return /*#__PURE__*/React__default['default'].createElement("h1", 
      className: "bg-blue-500"
    , children);
  

  return /*#__PURE__*/React__default['default'].createElement("p", 
    className: "bg-blue-500"
  , children);
;

exports.Text = Text;

我没有放整个文件内容，因为它是很多样板文件，但styleInject 只是创建了一个样式标记并将 css 放入其中并将其附加到页面的头部。现在在我的 gatsby 应用程序中，我将它导入到一个组件中，但我还添加了一些自定义样式，如下所示：

my-component.tsx

import React from 'react';
import PropTypes from 'prop-types';
import  Text  from '@custom/component-text';

const paragraph = () => 
    return (
        <div>
            <Text>Test</Text>
            <p className="bg-blue-500">Testing</p>
        </div>
    )
;

我在 gatsby 中使用 postcss 插件，我的 tailwind.config.js 插件设置如下：

tailwind.config.js

module.exports = 
  purge: 
    enabled: true,
    content: [
      './src/**/*.js,jsx,ts,tsx',
      './node_modules/@custom/**/*.js,jsx,ts,tsx',
    ],
  ,
  darkMode: false, // or 'media' or 'class'
  theme: 
    extend: ,
  ,
  variants: 
    extend: ,
  ,
  plugins: [],

现在，当我运行 gatsby develop 时，它会将组件样式放入样式标记中，但在 app.css 中它仍然重新定义 .bg-blue-500。我不确定我做错了什么，但它应该删除.bg-blue-500 的一个实例。

【参考方案1】：

默认情况下，PostCSS 和 Tailwind 似乎只适用于生产环境 (gatsby build)。来自Gatsby's documentation：

注意：默认情况下，PurgeCSS 仅在 build 命令上运行，因为它是 相对缓慢的过程。开发服务器将包括所有 Tailwind 类，因此强烈建议您在构建上进行测试 部署前的服务器。

来自Tailwind docs：

我们建议只删除生产中未使用的样式，因为删除 它们在开发中意味着您需要在任何更改时重新编译 您的模板和启用 PurgeCSS 的编译速度要慢得多。

您可以尝试通过以下方式更改默认行为：

// gatsby-config.js

 resolve: 'gatsby-plugin-postcss',
    options: 
        postCssPlugins: [require('tailwindcss')('./tailwind.config.js')],
     ,
 ,
 
  resolve: `gatsby-plugin-purgecss`,
  options:  
    tailwind: true,
    develop: true // add this if needed
  

来源：https://dev.to/mrpbennett/getting-setup-with-tailwind-gatsby-42c