Question

我正在与Svelte和Tailwindcss进行一个项目。我将Webpack用作捆绑包。我显然使用postcss和清除功能来减小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'
    })
  ]
});

exemple.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 声明中使用白名单道具来保护生成的苗条类？像这样...

if let root = rootController {
    bottomNavigationController = 
        UINavigationController(rootViewController: root)
    addChild(bottomNavigationController)
    bottomNavigationController.view.frame = 
        bottomNavigationContainer.bounds
    bottomNavigationContainer.addSubview(bottomNavigationController.view)
}

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

1 个答案: