Как удалить стили компонентов для несмонтированных компонентов? - PullRequest
Новая
       29

Как удалить стили компонентов для несмонтированных компонентов?

1 голос
/ 09 июля 2019

Проблема: стили компонента сохраняются, когда компонент был отключен.

В этом примере я отключаю (и уничтожаю) Unused компонент, но стили этого компонента по-прежнему влияют на страницу.

Справочная информация: я пытаюсь адаптировать существующую кодовую базу vue для SPA (с помощью vue-router).Эта проблема возникает, когда компонент для был изменен, но стили из предыдущего компонента влияют на новый.Я хочу решить это без изменений в стилях (например, создание оберток).

В настоящий момент я вижу только один возможный способ: изменить стили.Но я хочу что-то вроде this (я еще не проверял).При монтировании компонента он добавляет стили, а при размонтировании удаляет стили.

1 Ответ

0 голосов
/ 09 июля 2019

Наконец я начал использовать style-loader / useable вместо vue-style-loader для определенных файлов.Я добавил одно дополнительное правило ('useable-styles') для scss загрузчика.Вот часть моей конфигурации веб-пакета: 

export default {
  module: {
    scss: {
      test: /\.scss$/,
      oneOf: {
        'useable-styles': {
          test: /AppHomepage\.scss$/,// pattern for useable styles
          use: {
            'style-loader': {
              loader: 'style-loader/useable',
              options: {
                sourceMap: false,
              },
            },
            'css-loader': { /*...*/ },
            'resolve-url-loader': { /*...*/},
            'sass-loader': { /*...*/},
          },
        },
        'vue-modules': { /*...*/},
        vue: { /*...*/},
        normal: { /*...*/},
      },
    },
  },
};

Затем я загружаю стили в JS, например: 

import styles from './AppHomepage.scss';

// @vue/component
export default {
  name: 'app-homepage',
  beforeCreate() {
    styles.use();
  },
  destroyed() {
    styles.unuse();
  },
};

И вызываю styles.use(); или styles.unuse();, когда это необходимо, и это работает.

Это не идеальное решение, но оно будет работать как временное решение и ждать рефакторинга.

...