quasar.conf.js 的 css 数组仅支持路径字符串,需为存在且可解析的绝对或相对路径,按顺序注入 head 影响优先级,不支持内联样式、对象、require 引入或 scoped/CSS Modules。

quasar.conf.js 里 css 数组只接受路径字符串,不支持 CSS 内容或对象
直接往 css 数组里塞 { 'my-style': '...' } 或内联样式会报错,Quasar 构建时只认绝对路径或相对于项目根目录的相对路径(如 'src/css/my-theme.css')。它本质是让 Webpack 的 style-loader 和 css-loader 去处理这些文件,不是运行时注入。
- ✅ 正确写法:
css: ['src/css/custom.css'] - ❌ 错误写法:
css: [{ 'custom': 'body { color: red; }' }]或css: [require('./src/css/custom.css')] - 路径必须存在且可被 Webpack 解析;若用别名(如
@),需确保已在configureWebpack.resolve.alias中正确定义
自定义 CSS 加载顺序很重要:越靠前越容易被覆盖
css 数组里的文件按顺序注入 <head>,顺序直接影响 CSS 优先级。Quasar 自带的样式(如 quasar.variables.scss、quasar.esm.css)默认在最前面加载,你自己的文件排在后面才能有效覆盖变量或组件样式。
- 推荐顺序:
['src/css/quasar-overrides.css', 'src/css/app.css']—— 先覆写 Quasar 组件样式,再加全局样式 - 避免把自定义 CSS 放在数组开头,否则可能被后续 Quasar 样式重置
- 如果用了 SCSS/LESS,确保已安装对应 loader(
node-sass+sass-loader等),且扩展名写对('src/css/main.scss')
使用 CSS Modules 或 scoped style?别放这里
quasar.conf.js 的 css 数组是全局注入,所有组件都能访问。如果你要的是组件级作用域,不要往这儿加 .module.css 或 <style scoped> 文件——它们应该写在单文件组件内部,由 Vue Loader 处理。
DMap GL地图JSAPI(dmapgl)开发指南。用于编写、审查、调试 DMap 地图 API 代码,涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 全局主题、重置样式、字体引入 → 放
css数组 - 某组件专属样式 → 写在
<style scoped>或<style module>里 - 想动态切换主题?
css数组只支持构建时静态注入;运行时换肤得用 CSS 变量 + JS 切换document.documentElement.style
开发时热更新失效?检查文件是否被其他 loader 干扰
改了 src/css/custom.css 但页面没反应,常见原因是该文件被重复处理(比如同时被 css-loader 和 postcss-loader 处理两次),或路径拼错导致实际未加载。
立即学习“前端免费学习笔记(深入)”;
- 在浏览器开发者工具的
Network标签页搜custom.css,确认是否成功加载 - 打开控制台,看是否有
Failed to load resource或Module not found报错,错误信息里会明确指出路径问题 - 临时在
custom.css里写body { background: lime !important; },快速验证是否生效 - 如果用了
postcss-import或@import,确保路径是相对于被导入文件,不是相对于quasar.conf.js
quasar.conf.js 后必须重启 dev server,热更新不会监听这个文件。

















