Element: Thème personnalisé [Rapport de bogue], CSS répété plusieurs fois

Traduction de ce numéro :

Version de l'interface utilisateur de l'élément
2.4.2

Version OS/Navigateurs
Ubuntu16.4

Version vue
2.5.17-bêta.0

Lien de reproduction
https://jsfiddle.net/mmx38qxw/localproject

Étapes à reproduire
Selon le fonctionnement de 2 étapes de thème personnalisées du réseau officiel, après avoir configuré un nouveau thème, ouvert la page du projet, depuis la console, vous pouvez voir que le style de bouton, de saisie et d'autres espaces peut être répété plusieurs fois, 4 fois, 7 fois ou même plus de fois.

L'utilisation de webpack CSS pour supprimer le plug-in n'est pas efficace
Qu'est-ce qui est attendu ?

Le style CSS ne se répète pas
Que se passe-t-il réellement ?

Duplication de style CSS

je rencontre le meme probleme

@ashen9 L' avez-vous résolu ?

Même problème sur 2.4.6, faire remplacer mon modèle personnalisé par celui par défaut.

Dans mon projet, le même style est répété > 10 fois. Je pense que cela pourrait avoir quelque chose à voir avec la configuration du pack Web ?

@ststaynov j'avais essayé d'ajouter des plugins pour traiter les css dans webpackconfigs, mais rien ne s'est passé

Idem pour moi ( j'ai eu 7 fois), et j'ai utilisé de cette façon http://element-cn.eleme.io/#/zh -CN/component/custom-theme#zai-xiang-mu-zhong-gai-bian -scss-bian-liang

Quelqu'un a-t-il réussi à résoudre cela ? :/

J'ai le même problème.

@ashen9 L' avez-vous résolu ?

Non, il faut que chaque composant ait une définition répétée de la classe lors du chargement à la demande. Une fois le chargement complet modifié, les éléments sont empaquetés et dédupliqués

Même problème;
Si vous voulez utiliser input & input-number et importer des styles et des composants à la demande, j'ai des styles inclus deux fois, car, pour mon exemple, dans le fichier : input-number.scss j'ai :
<strong i="7">@import</strong> "input";
Pourquoi a-t-il été importé dans tous les composants ? Pas assez de mixins & vars ? ??

Même problème.

pareil ici

"element-ui": "^2.4.5" même problème

même problème
Je me demande s'il y a un problème avec les références de certains fichiers scss. Ce qui suit est l'en-tête de dropdown.scss

<strong i="8">@import</strong> "mixins/mixins";
<strong i="9">@import</strong> "common/var";
<strong i="10">@import</strong> "button";
<strong i="11">@import</strong> "./popper";

Le bouton @import provoque-t-il ici une compilation répétée du style du bouton

fast-sass-loader peut corriger ce bogue. Il peut supprimer le code de duplication.

même problème v2.6.1 sur nuxt

répéter

même! et ça me tue.
Je doute que ce soit parce que element n'utilise pas de partiels sass.

Le problème existe toujours dans la version 2.7, comment y remédier ?

le même sur 2.8.0

@Leopoldthecoder @QingWei-Li en êtes-vous conscient ?

même problème
Je me demande s'il y a un problème avec les références de certains fichiers scss. Ce qui suit est l'en-tête de dropdown.scss

<strong i="11">@import</strong> "mixins/mixins";
<strong i="12">@import</strong> "common/var";
<strong i="13">@import</strong> "button";
<strong i="14">@import</strong> "./popper";

Le bouton @import provoque-t-il ici une compilation répétée du style du bouton

fast-sass-loader peut corriger ce bogue. Il peut supprimer le code de duplication.

@chenzhq a signalé la source du problème.Plusieurs modules de composants scss font référence à plusieurs reprises à d'autres modules, ce qui fait que le développement local voit plusieurs modèles en double, simplement parce qu'ils sont automatiquement dédupliqués lors de la génération de production

@Leopoldthecoder @QingWei-Li Est-il possible de supprimer les références en double à l'intérieur des composants ? Ou est-ce en raison de la nécessité de prendre en compte les caractéristiques de la référence à la demande ?

@Leopoldthecoder @QingWei-Li en êtes-vous conscient ?

même problème
Je me demande s'il y a un problème avec les références de certains fichiers scss. Ce qui suit est l'en-tête de dropdown.scss

<strong i="12">@import</strong> "mixins/mixins";
<strong i="13">@import</strong> "common/var";
<strong i="14">@import</strong> "button";
<strong i="15">@import</strong> "./popper";

Le bouton @import provoque-t-il ici une compilation répétée du style du bouton
fast-sass-loader peut corriger ce bogue. Il peut supprimer le code de duplication.

@chenzhq a signalé la source du problème.Plusieurs modules de composants scss font référence à plusieurs reprises à d'autres modules, ce qui fait que le développement local voit plusieurs modèles en double, simplement parce qu'ils sont automatiquement dédupliqués lors de la génération de production

l'utilisation de fast-sass-loader ne le résout que sur la production ? ou aussi sur le développement ?

@ edum18 les deux. Dépendez de votre webpack ou vue.config.js .
vous pouvez l'utiliser pour remplacer le sass-loader.

Ce n'est pas une solution élégante.

Quelqu'un a testé la dernière version 2.9.1 ?

Quelqu'un a testé la dernière version 2.9.1 ?

Oui, le problème est toujours là...

même problème ici avec [email protected]

J'ai le même problème avec [email protected]

J'ai essayé de le faire mais cela n'a pas fonctionné。Où est l'erreur de configuration？CSS répété 2 fois

chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];

    const addFastSassLoader = rule => {
        rule
            .use('sass-loader')
            .set('loader', 'fast-sass-loader');
    };
    const scssRule = config.module.rule('scss');
    const sassRule = config.module.rule('sass');
    types.forEach(type => addFastSassLoader(scssRule.oneOf(type)));
    types.forEach(type => addFastSassLoader(sassRule.oneOf(type)));
},

[email protected] est normal, maintenant [email protected]
vue-cli est 3.0.0-rc.11

J'ai essayé de le faire mais cela n'a pas fonctionné。mon CSS s'est répété 7 fois， [email protected]

chainWebpack: config => { ['scss', 'sass'].forEach(style => { ['vue', 'vue-modules', 'normal-modules', 'normal'].forEach(one => { config.module .rule(style) .oneOf(one) .use('sass-loader') .loader('fast-sass-loader') }) }) }

function replaceSassLoader2Fast(rule) {
    rule.use('sass-loader')
        .loader('fast-sass-loader')
        .options({
            includePaths: [
                path.join(process.cwd(), 'src'),
            ],
        });
}
// chainWebpack
const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
types.forEach((type) => {
    replaceSassLoader2Fast(config.module.rule('scss').oneOf(type));
});

même problème avec sass-loader, webpack4 et [email protected] dupliqués plus de 5 fois :(

[email protected] toujours...

nous avons quitté element-ui à cause de ce problème, j'espère qu'il sera bientôt réglé :)

J'ai résolu ce problème en important un thème css personnalisé créé sur https://element.eleme.io/#/en -US/theme
Vous pouvez configurer les mêmes variables que vous le feriez avec un thème personnalisé mais, dans ce cas, le générateur de thème crée un fichier .css pour vous. Téléchargez le thème personnalisé et importez-le :

import Vue from 'vue';
import Element from 'element-ui';

import PTlang from 'element-ui/lib/locale/lang/pt-br';
import locale from 'element-ui/lib/locale';

// Custom theme you just created  
import '../assets/styles/element-ui-theme/theme/index.css';

locale.use(PTlang);
Vue.use(Element);

N'oubliez pas d'ajouter le dossier de polices fourni avec votre thème téléchargé.
Mon répertoire element-ui-theme :

Salut, @iamkun Pourriez-vous résoudre ce problème ? Beaucoup de gens l'ont rencontré. Merci.

même problème.

Idem ici, j'espère que cela sera résolu très bientôt.

Même problème, une solution ?

Même problème, une solution ?

une solution de contournement a déjà été publiée.

Même problème. J'ajoute optimization dans la configuration de développement pour le corriger.

// webpack.dev.js
...
optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true
        }
      }
    }
  }
...

Pour les personnes ayant des règles css chargées plus de deux fois, je sais d'où vient le problème, un bogue existe avec le chargeur sass qui regroupera le fichier à chaque fois qu'il est importé dans un autre fichier scss

Donc, si vous importez votre theme.scss dans d'autres composants pour utiliser les couleurs de votre thème, vous devez simplement importer les couleurs/variables dans ce fichier, donc divisez votre theme.scss en deux fichiers

1 - colors.scss

$--color-primary: #00A09E;
$--color-warning: #EE7219;
$--color-danger: #FE4A49;
$--color-info: #00AEEF;
$--color-success: #D6AE15;
$--color-text-primary: #242B35;
$--color-text-secondary: #D6AE15;

2 - theme.scss

<strong i="16">@import</strong> "colors";

$--font-path: '~element-ui/lib/theme-chalk/fonts';

// The default generated file is
// <strong i="17">@import</strong> "~element-ui/packages/theme-chalk/src/index";
// If you want to reduce the size further by getting rid of unused css, 
// copy the content of the previous file and comment the lines of the elements you don't need:
<strong i="18">@import</strong> "~element-ui/packages/theme-chalk/src/base.scss";
<strong i="19">@import</strong> "~element-ui/packages/theme-chalk/src/pagination.scss";
<strong i="20">@import</strong> "~element-ui/packages/theme-chalk/src/dialog.scss";
<strong i="21">@import</strong> "~element-ui/packages/theme-chalk/src/autocomplete.scss";
<strong i="22">@import</strong> "~element-ui/packages/theme-chalk/src/dropdown.scss";
<strong i="23">@import</strong> "~element-ui/packages/theme-chalk/src/dropdown-menu.scss";
<strong i="24">@import</strong> "~element-ui/packages/theme-chalk/src/dropdown-item.scss";
<strong i="25">@import</strong> "~element-ui/packages/theme-chalk/src/menu.scss";
<strong i="26">@import</strong> "~element-ui/packages/theme-chalk/src/submenu.scss";
<strong i="27">@import</strong> "~element-ui/packages/theme-chalk/src/menu-item.scss";
<strong i="28">@import</strong> "~element-ui/packages/theme-chalk/src/menu-item-group.scss";
<strong i="29">@import</strong> "~element-ui/packages/theme-chalk/src/input.scss";
<strong i="30">@import</strong> "~element-ui/packages/theme-chalk/src/input-number.scss";
<strong i="31">@import</strong> "~element-ui/packages/theme-chalk/src/radio.scss";
<strong i="32">@import</strong> "~element-ui/packages/theme-chalk/src/radio-group.scss";
<strong i="33">@import</strong> "~element-ui/packages/theme-chalk/src/radio-button.scss";
<strong i="34">@import</strong> "~element-ui/packages/theme-chalk/src/checkbox.scss";
<strong i="35">@import</strong> "~element-ui/packages/theme-chalk/src/checkbox-button.scss";
<strong i="36">@import</strong> "~element-ui/packages/theme-chalk/src/checkbox-group.scss";
<strong i="37">@import</strong> "~element-ui/packages/theme-chalk/src/switch.scss";
<strong i="38">@import</strong> "~element-ui/packages/theme-chalk/src/select.scss";
<strong i="39">@import</strong> "~element-ui/packages/theme-chalk/src/button.scss";
<strong i="40">@import</strong> "~element-ui/packages/theme-chalk/src/button-group.scss";
<strong i="41">@import</strong> "~element-ui/packages/theme-chalk/src/table.scss";
<strong i="42">@import</strong> "~element-ui/packages/theme-chalk/src/table-column.scss";
<strong i="43">@import</strong> "~element-ui/packages/theme-chalk/src/date-picker.scss";
<strong i="44">@import</strong> "~element-ui/packages/theme-chalk/src/time-select.scss";
<strong i="45">@import</strong> "~element-ui/packages/theme-chalk/src/time-picker.scss";
<strong i="46">@import</strong> "~element-ui/packages/theme-chalk/src/popover.scss";
<strong i="47">@import</strong> "~element-ui/packages/theme-chalk/src/tooltip.scss";
<strong i="48">@import</strong> "~element-ui/packages/theme-chalk/src/message-box.scss";
<strong i="49">@import</strong> "~element-ui/packages/theme-chalk/src/breadcrumb.scss";
<strong i="50">@import</strong> "~element-ui/packages/theme-chalk/src/breadcrumb-item.scss";
<strong i="51">@import</strong> "~element-ui/packages/theme-chalk/src/form.scss";
<strong i="52">@import</strong> "~element-ui/packages/theme-chalk/src/form-item.scss";
<strong i="53">@import</strong> "~element-ui/packages/theme-chalk/src/tabs.scss";
<strong i="54">@import</strong> "~element-ui/packages/theme-chalk/src/tab-pane.scss";
<strong i="55">@import</strong> "~element-ui/packages/theme-chalk/src/tag.scss";
<strong i="56">@import</strong> "~element-ui/packages/theme-chalk/src/tree.scss";
<strong i="57">@import</strong> "~element-ui/packages/theme-chalk/src/alert.scss";
<strong i="58">@import</strong> "~element-ui/packages/theme-chalk/src/notification.scss";
<strong i="59">@import</strong> "~element-ui/packages/theme-chalk/src/slider.scss";
<strong i="60">@import</strong> "~element-ui/packages/theme-chalk/src/loading.scss";
<strong i="61">@import</strong> "~element-ui/packages/theme-chalk/src/row.scss";
<strong i="62">@import</strong> "~element-ui/packages/theme-chalk/src/col.scss";
<strong i="63">@import</strong> "~element-ui/packages/theme-chalk/src/upload.scss";
<strong i="64">@import</strong> "~element-ui/packages/theme-chalk/src/progress.scss";
<strong i="65">@import</strong> "~element-ui/packages/theme-chalk/src/spinner.scss";
<strong i="66">@import</strong> "~element-ui/packages/theme-chalk/src/message.scss";
<strong i="67">@import</strong> "~element-ui/packages/theme-chalk/src/badge.scss";
<strong i="68">@import</strong> "~element-ui/packages/theme-chalk/src/card.scss";
<strong i="69">@import</strong> "~element-ui/packages/theme-chalk/src/rate.scss";
<strong i="70">@import</strong> "~element-ui/packages/theme-chalk/src/steps.scss";
<strong i="71">@import</strong> "~element-ui/packages/theme-chalk/src/step.scss";
<strong i="72">@import</strong> "~element-ui/packages/theme-chalk/src/carousel.scss";
<strong i="73">@import</strong> "~element-ui/packages/theme-chalk/src/scrollbar.scss";
<strong i="74">@import</strong> "~element-ui/packages/theme-chalk/src/carousel-item.scss";
<strong i="75">@import</strong> "~element-ui/packages/theme-chalk/src/collapse.scss";
<strong i="76">@import</strong> "~element-ui/packages/theme-chalk/src/collapse-item.scss";
<strong i="77">@import</strong> "~element-ui/packages/theme-chalk/src/cascader.scss";
<strong i="78">@import</strong> "~element-ui/packages/theme-chalk/src/color-picker.scss";
<strong i="79">@import</strong> "~element-ui/packages/theme-chalk/src/transfer.scss";
<strong i="80">@import</strong> "~element-ui/packages/theme-chalk/src/container.scss";
<strong i="81">@import</strong> "~element-ui/packages/theme-chalk/src/header.scss";
<strong i="82">@import</strong> "~element-ui/packages/theme-chalk/src/aside.scss";
<strong i="83">@import</strong> "~element-ui/packages/theme-chalk/src/main.scss";
<strong i="84">@import</strong> "~element-ui/packages/theme-chalk/src/footer.scss";
<strong i="85">@import</strong> "~element-ui/packages/theme-chalk/src/timeline.scss";
<strong i="86">@import</strong> "~element-ui/packages/theme-chalk/src/timeline-item.scss";
<strong i="87">@import</strong> "~element-ui/packages/theme-chalk/src/link.scss";
<strong i="88">@import</strong> "~element-ui/packages/theme-chalk/src/divider.scss";
<strong i="89">@import</strong> "~element-ui/packages/theme-chalk/src/image.scss";
<strong i="90">@import</strong> "~element-ui/packages/theme-chalk/src/calendar.scss";
<strong i="91">@import</strong> "~element-ui/packages/theme-chalk/src/backtop.scss";
<strong i="92">@import</strong> "~element-ui/packages/theme-chalk/src/infinite-scroll.scss";
<strong i="93">@import</strong> "~element-ui/packages/theme-chalk/src/page-header.scss";
<strong i="94">@import</strong> "~element-ui/packages/theme-chalk/src/cascader-panel.scss";
<strong i="95">@import</strong> "~element-ui/packages/theme-chalk/src/avatar.scss";
<strong i="96">@import</strong> "~element-ui/packages/theme-chalk/src/drawer.scss";
<strong i="97">@import</strong> "~element-ui/packages/theme-chalk/src/popconfirm.scss";

Et puis dans le scss de votre application (pas dans js), remplacez vos importations de thème (par exemple : <strong i="5">@import</strong> '{}/element-ui/theme.scss ) pour colorer les importations ( <strong i="7">@import</strong> '{}/element-ui/colors.scss )

Vous devrez également vous débarrasser du fichier css de l'élément par défaut (celui sans vos couleurs personnalisées)
Si vous avez généré votre configuration element-ui avec vue-cli (comme je l'ai fait), voici comment procéder

Même si vous avez choisi d'avoir un thème personnalisé lors de la génération de la configuration, le plugin a quand même ajouté ces lignes dans babel.config.js (c'est un bug qui doit être corrigé)

module.exports = {
  'presets': [
    '@vue/cli-plugin-babel/preset'
  ],
  'plugins': [
    [
      'component',
      {
        'libraryName': 'element-ui',
        'styleLibraryName': 'theme-chalk' //THIS
      }
    ]
  ]
}

Changez-le en

module.exports = {
  'presets': [
    '@vue/cli-plugin-babel/preset'
  ],
  'plugins': [
    [
      'component',
      {
        'libraryName': 'element-ui',
        'style': false
      }
    ]
  ]
}

Et le css inclus ne sera que la version de votre thème optimisé

Même problème. Version : 2.11.1

Style .el-input__inner répété 18 fois.

@Tofandel Après avoir essayé votre solution, la répétition a été réduite à 11, mais elle existe toujours .

@Tofandel n'a pas fonctionné pour moi.

@munjal-vandana avez-vous fait les deux suggestions ?

Je suis presque sûr que vous incluez votre thème personnalisé plusieurs fois

@munjal-vandana avez-vous fait les deux suggestions ?

Je suis presque sûr que vous incluez votre thème personnalisé plusieurs fois

Oui! C'était dû au thème personnalisé.

@praveenpuglia Tu sais sans donner de détails, je ne peux pas t'aider.. Qu'as-tu essayé ? Qu'est-ce qui ne fonctionne pas ?

J'ai utilisé tout ce que vous avez suggéré ci-dessus. Toujours voir beaucoup de doublons. Spécialement avec des éléments d'entrée.

Changez-le en

module.exports = {
  'presets': [
    '@vue/cli-plugin-babel/preset'
  ],
  'plugins': [
    [
      'component',
      {
        'libraryName': 'element-ui',
        'style': false
      }
    ]
  ]
}

Et le css inclus ne sera que la version de votre thème optimisé

J'utilise Vue CLI, qui utilise PostCSS. Outre la solution @chenzhq , voici un autre correctif avec postcss-loader :

Modifiez postcss.config.js pour permettre à cssnano de supprimer les CSS en double.

module.exports = {
  plugins: {
    autoprefixer: {},
    cssnano: {}
  },
};

Sachez que la compilation et le rechargement à chaud deviendront plus lents (environ 1 seconde sur mon ordinateur portable). Peut-être que fast-sass-loader est une meilleure option compte tenu de l'efficacité.

PS Je ne sais pas si element-ui le corrigera. Étant donné que la duplication semble être voulue et n'est pas un vrai bug. Cependant, "import-once" pourrait résoudre la cause principale de ce problème une fois disponible https://github.com/sass/sass/issues/1094

@Pingren J'ai essayé la solution que vous avez mentionnée mais cela n'a pas vraiment fonctionné. :(
Ne sera-t-il supprimé que pendant la construction ou pendant le développement également ?

@Pingren J'ai essayé la solution que vous avez mentionnée mais cela n'a pas vraiment fonctionné. :(
Ne sera-t-il supprimé que pendant la construction ou pendant le développement également ?

Pendant le développement aussi. Essayez d'abord de mettre à niveau votre Vue CLI. Selon le journal des modifications, il s'agit d'une nouvelle fonctionnalité introduite dans la version 4.1.0-beta.0 (2019-11-09) . Sinon, vous devez activer PostCSS manuellement.

https://github.com/vuejs/vue-cli/pull/4798

J'ai déjà Vue CLI 4.1.2 et j'ai aussi le fichier de configuration postcss.

Excusez-moi, ce problème est-il résolu ? Je l'ai rencontré aussi. Ça me fait mal à l'œuf...

J'ai essayé toutes les solutions proposées ici mais rien ne fonctionne pour moi. J'utilise vue cli et j'ai trouvé cette solution (ce n'est pas élégant mais au moins ça marche) :

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.NormalModuleReplacementPlugin(
        /element-ui[\/\\]lib[\/\\]theme-chalk[\/\\](.*)\.css/,
        'node-libs-browser/mock/empty'
      ),
    ],
  }
}

J'importe mon scss avec des variables d'élément une seule fois dans le point d'entrée de l'application.
J'espère que cela aidera quelqu'un.

@Tofandel a utilisé votre solution pour résoudre le problème que j'ai rencontré, merci !L'élément clé est l'introduction du fichier base.scss

@andr-canandr Avez-vous vérifié ce qui suit dans votre fichier babel.config.js ?

module.exports = {
  'presets': [
    '@vue/cli-plugin-babel/preset'
  ],
  'plugins': [
    [
      'component',
      {
        'libraryName': 'element-ui',
       // 'styleLibraryName': 'theme-chalk' //THIS should be 
        'styleLibraryName': "~src/plugins/theme.scss" //Path to your theme file
      }
    ]
  ]
}

J'ai trouvé toutes les informations correctes pour configurer un thème profondément enfoui dans le custom-theme.md

L'autre documentation est complètement incorrecte et trompeuse

si vous utilisez l'outil de création de thème :

https://github.com/ElementUI/element-theme

vous pouvez faire référence au problème, cela résout le problème qui supprime toutes les classes css dupliquées.

https://github.com/ElementUI/element-theme/issues/66

ajoutez simplement les arguments --minimize dans votre commande de construction de thème

yarn et  --minimize 

emmm... existent toujours