добавление имени динамического класса в svelte

В настоящее время я пишу приложение со стройным, саперным и попутным ветром. Итак, чтобы заставить попутный ветер работать, я добавил это в свою конфигурацию накопительного пакета

svelte({
        compilerOptions: {
          dev,
          hydratable: true,
        },
        preprocess: sveltePreprocess({
          sourceMap: dev,
          postcss: {
            plugins: [
              require("tailwindcss"),
              require("autoprefixer"),
              require("postcss-nesting"),
            ],
          },
        }),
        emitCss: true,
      })

В целом это работает, но у меня возникают проблемы с именами динамических классов.

Написание чего-то вроде этого всегда работает

  <div class={true ? 'class-a' : 'class-b'}>

оба class-a и class-b будут включены в окончательный созданный CSS, и все будет работать, как ожидалось.

Но когда я пытаюсь добавить имя класса переменной, это не сработает. Итак, представьте себе это:

  <div class={`col-span-6`}>

Он будет работать точно так, как ожидалось, и получит правильный стиль от класса css col-span-6 в попутном ветре.

Но если я изменю его на это:

  <div class={`col-span-${6}`}>

Тогда стиль не будет включен. С другой стороны, если у меня уже есть элемент DOM с классом col-span-6, то стили будут добавлены к обоим элементам.

Итак, я предполагаю, что компилятор видит, что CSS не используется, и его удаляют. И я предполагаю, что тогда мой вопрос заключается в том, есть ли способ принудительно использовать все стили от попутного ветра? чтобы я мог использовать более динамические имена классов

и не уверен, что это актуально, но компонент, на котором я это тестировал, имеет этот блок стиля

<style>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

edit: могу добавить, что я получаю кучу распечаток в журнале о том, что есть неиспользуемые селекторы css, которые, кажется, соответствуют всем классам попутного ветра


css tailwind-css svelte rollup sapper
person munHunger    schedule 02.01.2021    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Я думаю, это был purgeCSS (встроенный в попутный ветер 2.0), который не распознал динамические классы.

Эту проблему сложно решить для каждого класса попутного ветра, но если у вас их мало, вы можете вручную перечислить эти имена классов:

// tailwind.config.js
module.exports = {
  purge: {
    content: ['./src/**/*.html'],

    // These options are passed through directly to PurgeCSS
    options: {
      // Generate col-span-1 -> 12
      safelist: [...Array.from({ length: 12. }).fill('').map((_, i) => `col-span-${i + 1}`],
    },
  },
  // ...
}
person Derek Nguyen    schedule 02.01.2021

arrow_upward
0
arrow_downward

Я думаю, что когда атрибут класса является переменной или зависит от переменной, он не будет использоваться для извлечения стиля во время компиляции (class-${6} не оценивается во время компиляции, а во время выполнения), потому что svelte отмечает его как неиспользуемый селектор css, потому что значение этого класса Атрибут неизвестен при компиляции кода.

Чтобы заставить svelte включить ваш стиль, вы должны пометить его как глобальный, и для этого у нас есть два варианта:

<script>
// component logic goes here
</script>
div class={`class-${6}`}/>

Опция 1:

<style>
 :global(.class-6){
 // style goes here
 }
</style>

вариант 2: это пометит весь ваш стиль как глобальный

<style global>
 .class-6{
 // style goes here
 }
</style>
person Ryuman    schedule 03.01.2021