生产构建后组件样式将被忽略

编程问答 2022-08-14

问题描述

我有一个配置了Tailwindcss和Postcss的svelte应用程序。

在开发模式下，一切都运行良好，每种样式（全局样式和组件样式）均已使用并正常工作。

当我进行新的生产构建时，未使用组件样式，似乎在生产构建期间被忽略了。

我在组件中添加了一些样式，例如svelte文档展示，并且在开发人员本地环境中运行良好。

<style>
  div {
    height: 37px;
  }

  div:hover {
    height: 72px;
    border-radius: 1rem;
  }
</style>

即使当我使用专用样式文件时，css束也完全失败，并且某些其他css属性（来自tailwindcss）也不起作用...

我在汇总/ Postcss配置中没有发现什么地方出了错。

这是我的rollup.config.js 

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import livereload from 'rollup-plugin-livereload';
import postcss from 'rollup-plugin-postcss';
import { terser } from 'rollup-plugin-terser';
import sveltePreprocess from 'svelte-preprocess';
import svelteSVG from 'rollup-plugin-svelte-svg';

const production = !process.env.ROLLUP_WATCH;

function serve() {
  let started = false;

  return {
    writeBundle() {
      if (!started) {
        started = true;

        // eslint-disable-next-line global-require
        require('child_process').spawn('npm',['run','start','--','--dev'],{
          stdio: ['ignore','inherit','inherit'],shell: true,});
      }
    },};
}

export default {
  input: 'src/main.js',context: 'window',output: {
    sourcemap: true,format: 'iife',name: 'app',file: 'public/build/bundle.js',},plugins: [
    postcss({
      extract: true,}),json(),svelteSVG(),svelte({
      preprocess: sveltePreprocess({ postcss: true }),dev: !production,emitCss: true,css: (css) => {
        css.write('public/build/bundle.css');
      },resolve({
      browser: true,dedupe: ['svelte'],commonjs(),!production && serve(),!production && livereload('public'),production && terser(),],watch: {
    clearScreen: false,};

这是我的postcss.config.js 

const cssnano = require('cssnano');
const postcssColorMod = require('postcss-color-mod-function');
const postcsspresetEnv = require('postcss-preset-env');
const postcssImport = require('postcss-import');
const postcssUrl = require('postcss-url');
const purgecss = require('@fullhuman/postcss-purgecss');
const tailwindcss = require('tailwindcss');
const postcssFontMagician = require('postcss-font-magician');

const production = !process.env.ROLLUP_WATCH;

module.exports = {
  plugins: [
    postcssFontMagician({
      variants: {
        'Roboto Mono': {
          300: [],400: [],700: [],foundries: 'google',protocol: 'https:',postcssImport(),postcssUrl(),tailwindcss(),postcsspresetEnv({
      stage: 0,autoprefixer: {
        grid: false,postcssColorMod(),cssnano({
      autoprefixer: false,preset: ['default'],production &&
      purgecss({
        content: ['./**/*.svelte'],defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],};

在寻找解决方案并修改配置几个小时后，我无法使它起作用。 我认为purgecss函数正在删除我组件的样式，而无需深信。

一切似乎都还可以，我想念什么吗？

编辑

最终的捆绑包中甚至没有包含一些JavaScript。很奇怪

解决方法

您可以检查几件事：
缓存被清除了吗？
public/global.css是否包含您的样式（还是/public/build/bundle.css）？

您可以通过更改index.html中的“版本”来确保您的浏览器不使用缓存的文件：

 <link rel="stylesheet" href="/global.css?v=2.4" />
 <link rel="stylesheet" href="/build/bundle.css?v=2.4" />
  <script defer src="/build/bundle.js?v=2.4"></script>

v=2.4毫无意义，您只需在每次构建/部署后更改/增加编号，这将迫使浏览器重新加载每个文件。

打开global.css并搜索样式标签，是否找到它们。如果是，则将它们包括在内，这是缓存问题。如果不是这样，那就是摇树的问题。

postcssrollupsveltesvelte-3tailwind-css