vue-cli3提供了两种方式集成sass/scss

  1. 创建项目时选择预处理器sass
  2. 手动安装sass-loader

安装sass

方法一：创建vue项目时选择预处理器sass

使用vue-cli3创建vue项目

Vue CLI v4.5.15
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint) 
> Manually select features

移动上下键选择Manually select features，表示手动选择创建项目的配置。

按enter键，进入下一步操作，显示如下：

? Check the features needed for your project: 
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support        
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

移动上下键在CSS Pre-processors处点击空格键以选中，表示需要css预处理工具。

之后再进行css预处理工具操作，显示如下：

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
  Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)
  Less
  Stylus

选择Sass/SCSS (with node-sass)作为我们的CSS预处理器。

完成后项目会帮我们自动安装sass-loader 以及 node-sass依赖。

方法二：手动安装

如果在创建项目没有选择CSS 预处理器，我们也可以手动安装sass-loader以及 node-sass来集成scss

npm install -D sass-loader node-sass

使用sass

至此我们只需要在style指定lang为scss即可：

<style lang="scss">
	$color = red;
</style>

vue service clie会自动使用我们安装的sass-loader作为scss内容的加载器。

全局引用配置（重点）

一、Vue 单文件引用

假如现在我们已经将变量都定义在 variables.scss 文件上了，如果要在某个 .vue 文件里使用变量就要先将其引入。如：

<template>
...
</template>

<script>
...
</script>

<style lang="scss">
@import "你的路径/variables.scss";

.button {
   background: $--primary-bg;
}
</style>

但是这种方法不长久，如果我们每个组件都要引入，那不是每个 .vue 都要 @import 一次？这也太麻烦了。
所以应该考虑下面的sass全局引用讲解。

二、sass全局引用

1、写在 App.vue 上（不推荐使用）

如果你写的是一个网站，那么肯定会用到 App.vue 这个文件。所以你可以在 App 这个组件里 @import
注意：不要在 App 组件里写 scoped ，这样引入的样式都会应用到每个组件上

<template>
...
</template>

<script>
...
</script>

<style lang="scss">
@import "你的路径/variables.scss";
...
</style>
2、style-resources-loader自动引入（推荐使用）

如果你想自动化导入文件 (用于颜色、变量、mixin……)，你可以使用 style-resources-loader

用命令行工具执行下面的代码

vue add style-resources-loader

然后它会让你选择你使用的预处理器

vue3 vite 安装 less 和scss vue项目安装sass_Vue


安装完成后选择你使用的预处理器，你可以在 vue.config.js （如果你没有这个文件，就在你的项目根目录里新建一个就行了）复制如下代码：

// vue.config.js
const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
      // 这里假设你有 `src/variables.scss  src/scss/mixin.scss` 这两个文件
        path.resolve(__dirname,"./src/scss/variables.scss"),
        path.resolve(__dirname,"./src/scss/mixin.scss")
      ]
    }
  }
}

备注：
现在的 vue 已经将 /build/webpack.xxx.js 的 webpack 配置文件都隐藏起来了，而这个 vue.config.js 就像是 webpack.xxx.js 的总和，你可以配置 vue 提供的选项也可以混入 webpack 的配置。

官方文档