生产构建后忽略组件样式

Posted 2023-03-07

【中文标题】生产构建后忽略组件样式

【英文标题】：Components style ignored after production build

【发布时间】：2020-12-14 08:31:54

【问题描述】：

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

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

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

我为我的组件添加了一些样式，例如 Svelte 文档展示，这在开发本地环境中运行良好。

<style>
  div 
    height: 37px;
  

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

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

我没有在我的 Rollup/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 也没有包含在最终包中。很奇怪

【参考方案1】：

您可以检查几件事： 缓存被清除了吗？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 并搜索你的风格标签，你找到了吗？如果是，那么它们被包括在内，这是缓存问题。如果不是，那就是 treeshaking 的问题。

【讨论】：

我没有任何 public/global.css 一切都转到 public/build/bundle.css 并且在生产构建后样式标签不在文件中。我不认为缓存是问题，我在样式表文件上没有任何缓存。在未使用的浏览器上的私人窗口上测试

抱歉 global.css 是我的错误，bundle.css 当然是正确的文件。在我的简单设置中，我有："build:css": "set \"NODE_ENV=production\" && tailwindcss build public/tailwind.css -o public/global.css" (package.json)、purge: content: ["./src/**/*.svelte","./shared/**/*.svelte"], (tailwind.config.js) 和 svelte(dev: !production,css: css => css.write('public/build/bundle.css');), (rollup.config.js)