Пользовательский интерфейс элемента настраивает переменные sass

У меня есть проект с Vue.js и element-ui. Я хочу настроить переменные SASS element-ui для обновления темы, и я также хочу использовать эти переменные в моем стиле компонента Vue.

Мне удалось это сделать, создав свой собственный файл SASS, который импортирует файл из node_modules / element-ui / lib / theme-chalk / index.scss (например: https://element.eleme.io/#/en-US/component/custom-theme#update-scss-variables-in-your-project)

Но размер моего пакета резко увеличился. Для CSS он увеличился с 44 КБ до 800 КБ !!! Мне удалось уменьшить размер пакета css до 495 КБ (стиль огромный) при импорте только файлов компонентов SASS, которые я действительно использую в теме.

Я использую компонент babel-plugin следующим образом:

"plugins": [
  [
    "component",
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]
]

webpack vue.js sass element-ui
person guts    schedule 30.10.2018    source источник
comment
какое-либо решение на данный момент? У меня такая же проблема.   -  person alabama    schedule 07.01.2020

Ответы (2)


arrow_upward
1
arrow_downward

Я только что скопировал стили темы-мела в свой проект, изменил их и импортировал из проекта вместо того, чтобы иметь дело со стилями элементов, размер пакета в порядке. Используйте официальный компонент Babel Element (https://github.com/ElementUI/babel-plugin-component) как

module.exports = {
  plugins: [['component', { style: false }]]
};
person Sumuray Petrovich    schedule 07.05.2020

arrow_upward
0
arrow_downward

После анализа проблемы это мое объяснение без решения ...

Проблема заключается в модульности Element UI. Вы можете импортировать только те компоненты, которые вам нужны, и поэтому их файлы стилей будут импортированы правильно.

Но если вы импортируете весь theme-chalk, вы можете проверить, как импортируется каждый файл в theme-chalk/src/index, который имеет собственный импорт, и многие из них имеют один и тот же импорт несколько раз. Я бы хотел разделить устаревшие коды на модули, но у этого нет шансов ...

Вы можете использовать что-то вроде: https://github.com/maoberlehner/node-sass-magic-importer/tree/master/packages/node-sass-once-importer

person alabama    schedule 07.01.2020