Kendo UI致力于新的开发来满足不断变化的需求。Kendo UI for Vue使用旨在提高性能和丰富用户体验的Vue组件帮助开发人员构建下一代应用程序。它是为Vue技术框架提供可用的Kendo UI组件以便更快地构建更好的Vue应用程序。所有Kendo UI主题都是用sass写的使用scss语法您需要一个sass编译器来编译它们同时我们还支持node-sass和dart-sass。由于主题的复杂性我们依靠 postcss、autoprefixer 和 postcss-calc 来正确编译它们。使用 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 UI主题的常见问题列表以及如何解决这些问题。编译很慢从主题的第一天开始我们希望主题“自动”加载给定组件所需的样式。换句话说如果您只需要网格主题将加载所有输入组件因为它们是编辑功能所必需的这会导致多个重复的子导入因此在编译时会影响性能。如果您需要整个主题可以导入/dist/all.scss来替代导入/scss/all.scss。这是主题的单文件版本编译速度要快得多。如果你需要导入多个组件可以看看我们的主题任务和 sassimporter 助手它实现了一种缓存机制来避免重复的文件处理。无效的嵌套计算表达式由于主题的复杂性嵌套或其他无效的计算表达式可能会出现在生成的 css 中。 要处理这个问题请在您的 gulp 或 webpack 工作流程中使用 postcss-calc。