Документация: https://dc-ui-library.d4.dclouds.ru
___

Установка

``
npm i dc-ui-library
`

Подключение библиотеки

`
import DcUiLibrary from 'dc-ui-library'

...

Vue.use(DcUiLibrary)
`

Подключение стилей

`
$font--path: '~dc-ui-library/packages/theme/fonts';
@import '~dc-ui-library/packages/theme/styles/main.scss';
`

$3


1. Установить style-resources-loader
`
npm i style-resources-loader
`
2. Добавить rule в vue.config
`js
module.exports = {
configureWebpack: {
module: {
rules: [
///
{
test: /\.scss$/,
use: [
'sass-loader',
{
loader: 'style-resources-loader',
options: {
patterns: [
'./node_modules/dc-ui-library/packages/theme/styles/variables.scss',
'./node_modules/dc-ui-library/packages/theme/styles/mixins.scss',
],
},
},
],
},
///
],
},
},
}
`

$3

Для использования иконок нужно:
1. Установить svg-sprite-loader
`
npm i svg-sprite-loader
`

2. Добавить иконки используемые в библиотеки
`js
import { requireSvg } from '@/plugins/requireSvg'

requireSvg()
`
3. В vue.config добавить

`js
module.exports = {
configureWebpack: {
module: {
rules: [
///
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
},
///
],
},
plugins: [
new SpriteLoaderPlugin(),
],
},
chainWebpack: (config) => {
config.module.rules.delete('svg')
},
}
`

$3

Стили в компонентах написаны по методологии БЭМ, что позволяет легко изменить их

`scss
.dc-input {
&__inner {
padding: 20px 0;
height: 50px;
color: #000;
}

&--focus {
border-color: #e9e9e9;
}
}
`

Для каждого компонента есть свои переменые, которые можно изменить

Например:
`scss
$dc-input__hover-border-color: #d3d3d3;
``