4vueCli3版本里使用scss样式

npm 安装scss，项目文件根目录下安装

因为有些版本兼容问题，我选择了低版本。高版本webpack不兼容
npm i --save-dev sass-loader@8

sass-loader依赖于node-sass。所以还要安装sass
npm install node-sass --save

如果是单独的scss文件。可能要在配置文件里注册

单独的scss文件

比如：我在src/assets/scss/style.scss新建了一个style.scss文件，里面写了如下图代码
$bg:#red;

然后需要在vue.config.js里面进行配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  //关闭语法检查
  lintOnSave:false,
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/assets/style.scss";
        `
      }
    }
  }

})

然后组件的样式里就可以用这个变量了
background-color: $bg;