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

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

使用 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 sasssass.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    欢迎一起进群讨论

了解最新Kendo UI最新资讯，请关注Telerik中文网！

来源：慧都