node16 版本使用 node-sass 写 scss 时产生的问题：

问题原因：高版本的node已经弃用node-sass改用sass

我的当前版本

解决办法 卸载 node-sass 安装 sass： 1.卸载 node-sass 和 sass-loader：如果没安装过就不用卸载

npm uninstall node-sass sass-loader

2.安装 sass：当前最新版本：1.50.0

npm install sass@1.26.5 --save-dev

3.安装 sass-loader 当前最新版本：12.6.0

npm install sass-loader@7.3.1 --save-dev
#注意：如果是用cli3版本创建的vue项目，那么需要下载8版本以上的（vite创建的vue3.2项目也需要这个8以上的版本）
npm install sass-loader@8.0.2 --save-dev

4.编译安装 或者 删除 node_modules 文件夹之后再编译安装

(这步其实一般不需要)

npm install

5.修改 webpack.base.config.js 文件，让其支持 scss ——> 其实也可以不配置

{
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
},

6.更新 vue.config.js 文件

一般默认文件里是没有这个 css 配置的, 添加进去就好 ——> 一般也不需要配置

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require("sass"), // This line must in sass option
      },
    },
  },
};

7.在.vue 文件的 style 标签中加 lang=“scss”，并编写 scss 代码

  <style lang="scss" scoped>
    .container{
      width: 1200px;
      margin: 0 auto;
      display: flex;
      /* height: 200px; */
      /* background-color: brown; */
      margin-top: 50px;
      .tbody{
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
        background-color: #f5f9ff;
        min-height: 800px;
        .line{
          width: 1200px;
          height: 50px;
          background-color: #7a91bc;
          line-height: 50px;
        }
        .line > span{
          float: left;
          margin-left: 50px;
          font-size: 20px;
        }
        .line > input{
          float: right;
          width: 390px;
          height: 20px;
          position: relative;
          top: 50%;
          transform: translateY(-50%);
          margin-right: 20px;
          padding-left: 20px;
          border-radius: 10px;
        }
      }
    }
  </style>

8.运行项目

npm run dev