vue项目中配置集成scss环境

一、scss是什么？(和sass的区别)

scss是一种css预处理语言，是一个css的扩展，它在css语法的基础上，允许您使用变量，嵌套规则，混合，导入，继承等功能，使得css更加强大和优雅，而且其完全兼容css3。

scss 与 sass异同：sass和scss其实是一样的css预处理语言

1.文件扩展名不同，Sass版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。

2.语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号，而 Scss 的语法书写和我们的CSS 语法书写方式非常类似。

二、如何在vue项目中引入scss

vuecli初始化的项目

1.安装sass的依赖包
  npm install --save-dev sass
  npm install --save-dev sass-loader 
（若出错，因为sass-loader版本过高导致，可以将其package.json中的版本改为7.3.1，
  然后再重新安装sass-loader包，若是还过高，
  则重装6.x,cnpm i sass-loader@6.x --save-dev）
2.sass-loader依赖于node-sass,安装node-sass
//在开发环境安装依赖
  npm install --save-dev node-sass
3.配置vue.config.js文件
  //1.在asstes文件夹下建立一个scss文件夹 然后创建一个 _variable.scss文件 用来存储全局变量。
...
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/scss/_variable.scss";` //引入全局变量   
      }
    }
 }
...
//由于sass-loader的版本不同，这里可能会报错，不同的版本对应的关键字不一样：
sass-loader v8-中，关键字为 “ data ”
sass-loader v8中，关键字为 “ prependData ”
sass-loader v10+中，关键字为 “ additionalData ”
//（如果是在webpack.config.js中配置scss）,
//可根据https://blog.csdn.net/weixin_43846248/article/details/89056997进行配置

4.使用--不用在main.js中导入--在vue页面中
<style lang="scss">
#app {
  color: $theme-color;//使用
}
</style>

 vite初始化项目

1.安装sass的依赖包
  npm install --save-dev sass
  npm install --save-dev sass-loader 
//（若出错，因为sass-loader版本过高导致，可以将其package.json中的版本改为7.3.1，
//  然后再重新安装sass-loader包，若是还过高，
//  则重装6.x,cnpm i sass-loader@6.x --save-dev）
2.配置vite,config.js文件
//1.在asstes文件夹下建立一个scss文件夹 然后创建一个 _variable.scss文件 用来存储全局变量。
{
  import { defineConfig } from "vite";
  import vue from "@vitejs/plugin-vue";
   
  import { resolve } from "path"; // 引入方法
   
  export default defineConfig({
    plugins: [vue()],
    resolve: {
      alias: [ // 配置 @ 指代 src
        {
          find: "@",
          replacement: resolve(__dirname, "./src"),
        },
      ],
    },
   
    // 本文相关配置
    css: {
      // css预处理器
      preprocessorOptions: {
        scss: {
          // 定义全局的scss变量
          // 给导入的路径最后加上 ; 
          additionalData: `@import '@/assets/scss/_variable.scss';`
        }
      }
    }
  });
  }
//由于sass-loader的版本不同，这里可能会报错，不同的版本对应的关键字不一样：
sass-loader v8-中，关键字为 “ data ”
sass-loader v8中，关键字为 “ prependData ”
sass-loader v10+中，关键字为 “ additionalData ”
//（如果是在webpack.config.js中配置scss）,
//可根据https://blog.csdn.net/weixin_43846248/article/details/89056997进行配置

4.使用--不用在main.js中导入--在vue页面中
<style lang="scss">
#app {
  color: $theme-color;//使用
}
</style>

提示:webpack.config.js和vue.config.js的区别

webpack.config.js是webpack的配置文件，所有使用webpack作为打包工具的项目都可以使用，vue项目使用，react项目也可用。

vue.config.js是vue项目的配置文件，专用于vue项目。通过vue.config.js中常用功能的配置，简化了配置工作，当然如果需要更专业的配置工作，两者在vue项目中是可以并存的。

vue-cli3创建的时候并不会自动创建vue.config.js,因为这个是可选项，所以一般都是修改webpack的时候才会己创建一个vue.config.js,

再然后因为vue-cli3内部高度集成了webpack，一般来说使用者不需要再去webpack做了什么，所以没有暴露webpack的配置文件,但你依然可以创建vue.config.js去修改默认的webpack。极大的简化了程序员配置webpack的工作

然后重启服务器 npm run serve (注意你一旦修改了 vue.config.js文件 就要重启服务器 因为你改了配置文件 它加载的是修改之前的)