使用 Tailwindcss+postcss 的 Svelte 组件样式的 Webpack

Question

我正在使用 Svelte 和 Tailwindcss 开展一个项目。我使用 Webpack 作为我的捆绑包。我显然使用 postcss 和 purgess 来减小我的 css 的大小。

在开发模式下，我不清除任何东西，它工作得很好，但是当我想构建项目时，一切都中断了。

我在模板工作中直接使用的顺风类，它们最终出现在最终的 css 包中。我在里面写的自定义 css 被清除了。

postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss');

const production = process.env.NODE_ENV === 'production';

module.exports = ({ file, options, env }) => ({
  plugins: [
    require('postcss-import'),
    require('postcss-preset-env'),
    require('tailwindcss'),
    require('autoprefixer'),
    production &&
      purgecss({
        content: ['./src/**/*.svelte'],
        defaultExtractor: content => {
          return content.match(/[A-Za-z0-9-_:/]+/g) || [];
        }
      }),
    production && require('cssnano')
  ]
});

webpack.common.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const PATHS = require('./paths');

module.exports = {
  entry: {
    app: PATHS.src,
    background: PATHS.src + '/background.js'
  },
  output: {
    path: PATHS.build,
    filename: '[name].js'
  },
  resolve: {
    alias: {
      svelte: PATHS.modules + '/svelte'
    },
    extensions: ['.mjs', '.js', '.svelte'],
    mainFields: ['svelte', 'browser', 'module', 'main']
  },
  module: {
    rules: [
      {
        test: /\.(html|svelte)$/,
        exclude: /node_modules/,
        use: {
          loader: 'svelte-loader',
          options: {
            emitCss: true
          }
        }
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'images',
              name: '[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin([
      {
        from: PATHS.public,
        to: PATHS.build
      }
    ]),
    new HtmlWebpackPlugin({
      title: 'Hanzi xiaobai',
      inject: false,
      template: require('html-webpack-template'),
      appMountId: 'root',
      lang: 'en',
      mobile: true
    })
  ]
};

webpack.production.js

const merge = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const common = require('./webpack.common');

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          },
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ]
});

example.svelte

<style type="type/postcss">
  h1 {
    @apply text-gray-200 font-bold uppercase text-2xl antialiased
  }
</style>

<div class="h-48 flex flex-col items-center">
  <h1>Title</h1>
</div>

在此示例中，h-48 flex flex-col items-center 已正确输出和应用。但text-gray-200 font-bold uppercase text-2xl antialiased 不是。

我尝试使用svelte-preprocess-postcss 和其他东西，但我或多或少地调整了一些东西，却不知道我在做什么。

Answer 1

这是一个猜测；但是您是否需要在 purgecss 声明中添加一个 whitelist prop 来保护生成的苗条类？像这样的......

const purgecss = require('@fullhuman/postcss-purgecss')({
 content: [
   './**/**/*.html',
   './**/**/*.svelte'
 ],

 whitelistPatterns: [/svelte-/],

 defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
});