Vue CLI 是一個創建 Vue.js 項目的標準工具，它幫助我們創建基礎的項目結構并且可以集成各種插件。在創建 Vue 項目時，我們可以選擇 CSS 預處理器，在使用 Vue CLI 中選擇 SCSS 作為項目的預處理器時，需要進行如下配置：

npm install sass-loader node-sass --save-dev

首先通過 npm 安裝 sass-loader 和 node-sass，這兩個包用于將 SCSS 文件編譯成 CSS，接著在 Vue 項目的 webpack 配置文件中添加如下配置：

module.exports = {
// ...
css: {
loaderOptions: {
scss: {
prependData: `@import "~@/styles/variables.scss";`
}
}
}
}

這里的 “~@” 是 webpack 的 alias，指向項目中的 “src” 目錄，也就是我們項目中的 “@”。

在 SCSS 樣式文件中，我們可以通過 @import 指令引入公共的和自定義的變量、mixin 和函數等，這里以引入變量為例：

// styles/variables.scss
$primary-color: #42b983;
$secondary-color: #35495e;

// styles/main.scss
@import "~@/styles/variables.scss";
body {
background: $primary-color;
}

在 main.scss 文件中，我們可以使用 variables.scss 中定義的變量。

此外，我們還可以使用 CSS modules，它可以讓我們為每個組件單獨創建一個 CSS 作用域，防止全局 CSS 污染。

module.exports = {
// ...
css: {
loaderOptions: {
scss: {
prependData: `@import "~@/styles/variables.scss";`
},
modules: {
localIdentName: '[name]-[hash]',
exportLocalsConvention: 'camelCaseOnly'
}
}
}
}

在使用 CSS modules 時，我們需要給樣式文件添加 .module.scss 后綴，并在組件中以<style module>的方式引入。例如：

// components/MyComponent.vue
<template>
<div :class="$style.wrapper">
<p :class="$style.title">Hello World!</p>
</div>
</template>
<style module>
.wrapper {
background: $primary-color;
}
.title {
color: $secondary-color;
}
</style>

這里的 $style 對象是在運行時自動生成的，與組件的名稱及其作用域相對應。