Кендо Угловые 2 Темы

Я пытаюсь выяснить, как настроить тему, как описано здесь:Кендо Угловые 2 Темы

http://www.telerik.com/kendo-angular-ui/components/styling/

То, что я не могу понять, в разделе Пользовательские темы. В нем описывается возможность изменения scss-переменных непосредственно в вашем приложении, но это не работает для меня. Какие именно ссылки мне нужны, чтобы я мог это сделать?

$accent: #ff69b4; 

@import "[email protected]/kendo-theme-default/scss/all";

Я могу поместить это в свой файл стиля компонента ... но я все еще ничего не вижу (он ничего не делает).

Что такое «правильный путь к модулям», который они здесь приводят?

@Component({ 
    selector: 'my-app', 
    styleUrls: [ 
    // load the default theme (use correct path to modules) 
    'styles.scss'

источник

2017-01-25 BriDev

Похоже, комментарий немного вводит в заблуждение здесь, спасибо за чего это. –

Благодаря style encapsulation, если поместить его в компоненте он будет идти применяться только к собственной HTML вашего компонента.

Вы хотите, чтобы ваша тема была применена ко всему html, так что вы можете либо поместить это на свой корневой компонент (обычно компонент приложения) с помощью параметра ViewEncapsulation равным none, либо поместить его в глобальный файл scss, указанный в вашем <head>.

Вот некоторый код для первого варианта (чистейший, на мой взгляд):

app.component.ts:

@Component({ 
    selector: 'app', 
    template: require('./app.component.html'), 
    encapsulation: ViewEncapsulation.None, 
    styles: [require('./app.component.scss')] 
})

app.component.scss:

/* Redefine here all the kendo theme variables you want */ 
$accent: red; 

@import "[email protected]/kendo-theme-default/scss/all";

Теперь это означает, что вы должны использовать scss для своего проекта. Например, с WebPack, вы можете сделать это:

module: { 
    loaders: [ 
     { test: /\.scss$/, loader: 'to-string!css!sass' }, 
     ...

Вам нужно будет использовать CSS-погрузчик и дерзость-погрузчик пакетов НПМ.

Вы можете найти все переменные, которые можно настроить в файле _variables.scss: https://github.com/telerik/kendo-theme-default/blob/master/scss/_variables.scss

источник

2017-01-26 08:18:13

Итак, возможно, мне нужно немного отступить ... Я нарушил главное правило задавать вопрос, не указывая на мою цель. ;) То, что я действительно хочу, - это возможность включать библиотеки тем в мой компонент таким образом, чтобы я мог легко регулировать цветовые переменные и тестировать их изменения, не перекомпилируя весь источник темы. Документация от Telerik подразумевала вас может сделать это, ссылаясь на scss вместо вывода css. Я, честно говоря, не против, применяется ли это только к моему компоненту или всему сайту html сайта. – BriDev

Ну, это то, что мое решение делает. В основном, вы импортируете scss всей темы в свой собственный scss-файл. Поэтому, если вы измените любую переменную, используемую темой, она изменит вывод css. Обратите внимание, что вы не ссылаетесь на вывод css напрямую, а на scss. Это webpack (или эквивалент), который преобразует это в css для вас при создании. Это означает, что вы должны иметь возможность использовать scss в своем проекте. См. Мое редактирование для этой части. –

Хорошо, спасибо Винсент, я думаю, вы указываете меня в правильном направлении. Похоже, что моя текущая настройка веб-пакета не может быть настроена так, как этого требует (как вы указали). (Я все еще очень новичок в угловой/webpack .. с использованием шаблона, созданного кем-то другим). Во всяком случае, вот мой текущий WebPack конфигурации для обработки SCSS файлов: { тест: /\.css?$/, погрузчик: 'сырым-погрузчик' }, { тест:/\ .scss? $ /, loader: 'raw-loader! csso-loader! sass' } – BriDev

Кендо Угловые 2 Темы

ответ

Смежные вопросы