Запекать переменные SCSS в многократно используемые однокомпонентные файлы Vue

Я хотел бы создать репозиторий npm, содержащий папку с однофайловыми компонентами Vue, из которых я могу легко импортировать:

import { Button } from "@user/design-system"

у меня проблема в том, что Button.vue содержит переменные, поступающие из глобального .scss файла, который обрабатывается Webpack.

Как я могу встроить переменные в каждый компонент при сборке для выпуска npm? По сути, мне нужна среда разработки, которой я управляю с помощью npm run serve, и мне нужна npm run build, которая копирует все компоненты и запекает CSS variables в нее, чтобы иметь автономные компоненты.


npm vue.js vuejs2 vue-cli-3
person supersize    schedule 19.08.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

У вас должны быть эти переменные в специальном файле (например, _variables.scss) в вашем проекте, в который вы хотите импортировать свой компонент. Затем вы должны сделать эти переменные доступными для всех компонентов. Я предлагаю вам использовать style-resouces-loader, который будет импортировать вашу переменную в каждый компонент. Оболочка Vue ClI - vue-cli-plugin-style-resources-loader.

Чтобы экспортировать свою библиотеку пользовательского интерфейса с уже встроенным CSS, вы должны создать свою библиотеку пользовательского интерфейса с помощью vue-cli-service build . А затем вы можете импортировать созданный вами компонент со встроенными CSS стилями, который был создан на основе SCSS.

person Andrew Vasilchuk    schedule 19.08.2019
comment
это текущая настройка, но как я могу выполнять предварительную обработку, когда другой проект хочет импортировать файлы и не хочет настраивать препроцессор в своем собственном проекте? - person supersize; 20.08.2019
comment
@supersize, вам следует создать свою библиотеку пользовательского интерфейса с помощью сборки vue-cli-service . А затем вы можете импортировать созданный вами компонент со встроенными CSS стилями, который был создан из SCSS. - person Andrew Vasilchuk; 20.08.2019
comment
@supersize, пожалуйста. Потом отредактирую ответ. - person Andrew Vasilchuk; 21.08.2019