Vue2+Vue Cli项目安装及配置Sass流程

我的版本：

npm 8.5.2
node v17.7.0

@vue/cli 5.0.8

根据官方说明 Vue CLI 项目天生支持 PostCSS、CSS Modules 和包含 Sass、Less、Stylus 在内的预处理器。

Vue CLI 项目确实默认支持 Sass，而且在创建项目时，你可以选择预处理器（Sass/Less/Stylus）。默认情况下，Vue CLI 会为你配置好相关的 webpack loader 来处理 Sass 文件。

在创建项目时选择了 Sass 预处理器的话，Vue CLI 会自动安装必要的依赖（如 sass-loader 和 sass）。

如果你在创建项目时没有选择预处理器，你也可以在后续手动安装相关的 webpack loader，就像文档中提到的那样：

一、安装sass

npm install -D sass-loader@10 sass

这里要注意版本，版本过高可能会报错

二、在组件中使用： 你可以在 Vue 单文件组件中直接引入 .scss 文件：

<template>
  <div class="component-container">
    <p>This is a component.</p>
  </div>
</template>

<style lang="scss">
// 在样式块中引入 .scss 文件
@import "@/assets/styles/common.scss";

.component-container {
  background-color: $primary-color; // 使用定义的变量
}
</style>

三、全局样式： 如果你希望在整个项目中共享某些样式，可以将它们写在全局样式文件中，并在入口文件中引入：

// main.js

import Vue from 'vue';
import App from './App.vue';

import '@/assets/styles/common.scss'; // 引入全局样式文件

Vue.config.productionTip = false;

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