如何将 bootstrap 或 tailwind css 名称解析为非 bootstrap 或非 tailwind css 名称

Question

我制作了一个基于 bootstrap 和 tailwind 的 Web 应用程序，但是我不希望在浏览器工具中可见地查看我的 Web 应用程序 UI。所以我想知道在公开发布Web应用程序之前是否可以将顺风CSS名称解析为随机名称？

Answer 1

我最熟悉next.js，这就是我设法对CSS进行哈希处理的方法。我希望你能理解它。

index.jsx

   import styles from './index.module.css';
   const Home = () => <div className={styles.foo}>Hello World</div>;
   export default Home;

index.module.css

  .foo {
      font-size: 1.5rem;
      line-height: 2rem;
    }

next.config.js

const path = require('path');
const loaderUtils = require('loader-utils');

const hashOnlyIdent = (context, _, exportName) =>
  loaderUtils
    .getHashDigest(
      Buffer.from(
        `filePath:${path
          .relative(context.rootContext, context.resourcePath)
          .replace(/\\+/g, '/')}#className:${exportName}`,
      ),
      'md4',
      'base64',
      6,
    )
    .replace(/^(-?\d|--)/, '_$1');

module.exports = {
  webpack(config, { dev }) {
    const rules = config.module.rules
      .find((rule) => typeof rule.oneOf === 'object')
      .oneOf.filter((rule) => Array.isArray(rule.use));

    if (!dev)
      rules.forEach((rule) => {
        rule.use.forEach((moduleLoader) => {
          if (
            moduleLoader.loader?.includes('css-loader') &&
            !moduleLoader.loader?.includes('postcss-loader')
          )
            moduleLoader.options.modules.getLocalIdent = hashOnlyIdent;
        });
      });

    return config;
  },
};

这个：

至：

Answer 2

上面分享的答案不适用于 Tailwind CSS 类名