Quasar CLI with Vite - @quasar/app-vite
Quasar CLI 中提供了开箱即用的 Sass 或 SCSS 支持。
配置
您可以通过 /postcss.config.js 文件和扩展 Vite 配置的方式来配置如何处理您的 CSS。
// quasar.config.js
build: {
extendViteConf (viteConf, { isClient, isServer }) {
viteConf.css.modules = ...
viteConf.css.postcss = ...
viteConf.css.preprocessorOptions
}
}content_paste
更多信息请参考：css.modules, css.postcss, css.preprocessorOptions.
用法
您的 Vue 文件可以通过 <style> 标签来包含 Sass/SCSS 代码。
<!-- 注意 lang="sass" -->
<style lang="sass">
div
color: #444
background-color: #dadada
</style>content_paste
<!-- 注意 lang="scss" -->
<style lang="scss">
div {
color: #444;
background-color: #dadada;
}
</style>content_paste
当然标准的 CSS 也是支持的：
<style>
div {
color: #444;
background-color: #dadada;
}
</style>content_paste
变量
Quasar 也提供了一些可以直接使用的变量（如: $primary, $grey-3, …）,关于更多信息，请参考：Sass/SCSS 变量。