彩票走势图

UI组件库Kendo UI for Vue原生组件中文教程:如何编译一个主题?

翻译|使用教程|编辑:龚雪|2022-09-19 10:30:24.223|阅读 97 次

概述:本文主要为大家介绍在使用Kendo UI for Vue控件的过程中如何编译一个应用程序主题,欢迎下载最新版控件体验!

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

Kendo UI致力于新的开发,来满足不断变化的需求。Kendo UI for Vue使用旨在提高性能和丰富用户体验的Vue组件,帮助开发人员构建下一代应用程序。它是为Vue技术框架提供可用的Kendo UI组件,以便更快地构建更好的Vue应用程序。

所有Kendo主题都是用sass写的,使用scss语法,您需要一个sass编译器来编译它们,同时我们还支持node-sass和dart-sass。

由于主题的复杂性,我们依靠 postcss、autoprefixer 和 postcss-calc 来正确编译它们。

Kendo UI最新正式版下载

使用 gulp

以下设置将从源 ./sass/kendo-theme.scss 生成 ./dist/kendo-theme.css。

请注意:

  • 我们包含/dist/all.scss,这是主题的扁平化单文件版本,用于更快的编译。
  • 将为市场份额至少为 10% 的浏览器生成前缀。
  • sassOptions.precision 设置在使用 dart-sass 时无效。
  • 确保安装 gulp-sass、node-sass、dart-sass、gulp-postcss、autoprefixer、postcss-calc 和 fiber。

// assuming ./sass/kendo-theme.scss
@import "../node_modules/@progress/kendo-theme-default/dist/all.scss";

const gulp = require('gulp');
const sass = require('gulp-sass');
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const calc = require("postcss-calc");
const Fiber = require('fibers');

// Use node sass
sass.compiler = require('node-sass');
// Use dart-sass
// sass.compiler = require('dart-sass');

const postcssPlugins = [
calc({
precision: 10
}),
autoprefixer({
overrideBrowserslist: [ '> 10%' ]
})
];
const sassOptions = {
precision: 10,
outputStyle: 'expanded',
fiber: Fiber
};
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass.sync(sassOptions).on('error', sass.logError))
.pipe(postcss(postcssPlugins))
.pipe(gulp.dest('./dist'));
});

使用 webpack

确保安装了 style-loader、sass-loader、node-sass、dart-sass、postcss-loader、autoprefixer、postcss-calc 和 fiber。

// assuming ./sass/kendo-theme.scss
@import "~@progress/kendo-theme-default/dist/all.scss";

module.exports = {
module: {
rules: [
{
test: /.scss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// PostCSS
{
loader: 'postcss-loader',
options: {
precision: 10,
plugins: [
require('autoprefixer')(),
require('postcss-calc')()
]
}
},
// Compiles Sass to CSS
{
loader: 'sass-loader',
options: {
implementation: require('node-sass'),
// implementation: require('dart-sass'),
sassOptions: {
precision: 10,
// fiber: require('fibers')
}
}
}
]
}
]
}
};

已知的问题

以下是Kendo主题的常见问题列表以及如何解决这些问题。

编译很慢

从主题的第一天开始,我们希望主题“自动”加载给定组件所需的样式。换句话说,如果您只需要网格,主题将加载所有输入组件,因为它们是编辑功能所必需的,这会导致多个重复的子导入,因此在编译时会影响性能。

如果您需要整个主题,可以导入/dist/all.scss,来替代导入/scss/all.scss。这是主题的单文件版本,编译速度要快得多。

如果你需要导入多个组件,可以看看我们的主题任务和 sassimporter 助手,它实现了一种缓存机制来避免重复的文件处理。

无效的嵌套计算表达式

由于主题的复杂性,嵌套或其他无效的计算表达式可能会出现在生成的 css 中。 要处理这个问题,请在您的 gulp 或 webpack 工作流程中使用 postcss-calc。


Telerik_KendoUI产品技术交流群:726377843    欢迎一起进群讨论

高端UI界面开发定制-慧都

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP