UIkit组件样式不生效是怎么回事？

轩辕培珍提问于 2026-03-12 22:05:21 阅读 3

组件

我在Vue项目里引入了UIkit，但写出来的按钮完全没有UIkit的样式，控制台也没报错，是不是哪里配置漏了？

我按文档在main.js里import了CSS，组件里也加了uk-button类名，但按钮还是原生样式，根本没变。

<template>
  <button class="uk-button uk-button-primary">点我</button>
</template>

<script>
export default {
  name: 'TestButton'
}
</script>

UIkit 前端框架组件样式

我来解答赞 0 收藏

反馈

1 条解答

司空子轩 Lv1

这种情况在UIkit 3里很常见，别慌。

UIkit 3跟2不一样，它是模块化的。你引入了主样式文件还不够，按钮这些组件的样式得单独引入。

在main.js里加上这个：

import 'uikit/dist/css/uikit.min.css'

import 'uikit/dist/css/components/button.min.css'

或者如果你用的是SCSS，可以在App.vue或main.scss里：

@import '~uikit/dist/css/uikit.scss';

@import '~uikit/dist/css/components/button.scss';

还有个容易踩的坑——你用npm安装的UIkit版本如果是3.x，那必须按组件分别引样式。2.x是全量引入的，差别很大。

如果上面两种方式都试了还是不生效，检查一下有没有其他样式把uk-button覆盖了，用浏览器开发者工具看看computed里的按钮样式到底是哪来的。

还有一种情况是构建工具没处理好CSS导入，试试把路径改成完整的绝对路径看看。

2026-03-12 22:07