vue sass

作者：至尊巅峰发布日期:2026-03-29 浏览:72

// main.js
import Vue from 'vue'
import App from './App.vue'
import './assets/styles/main.scss'  // 引入 SASS 文件

new Vue({
  render: h => h(App),
}).$mount('#app')

// assets/styles/main.scss
$body-bg-color: #f0f0f0;
$primary-color: #42b983;

body {
  background-color: $body-bg-color;
  color: $primary-color;
  font-family: Arial, sans-serif;
}

解释说明：

引入 SASS 文件：
- 在 main.js 中，通过 import './assets/styles/main.scss' 引入了 SASS 文件。这会在应用启动时加载样式。
SASS 变量：
- 在 main.scss 文件中定义了两个变量 $body-bg-color 和 $primary-color，用于设置背景颜色和主要文字颜色。
样式应用：
- 使用这些变量来设置 body 的样式，包括背景颜色、文字颜色和字体。

这个示例展示了如何在 Vue 项目中使用 SASS 来管理样式，并通过变量简化样式的维护。

上一篇：vue使用axios解决跨域

下一篇：vue上传文件到后端