Веб-пакет со стилем компонентов Svelte с использованием Tailwindcss + postcss - PullRequest
Новая
       52

Веб-пакет со стилем компонентов Svelte с использованием Tailwindcss + postcss

0 голосов
/ 03 ноября 2019

Я работаю над проектом с 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'
    })
  ]
});

emple.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 и другие вещи, но я более или менее настраиваю вещи без понятия о том, что я делаю.

...