Vue3项目中使用scss

新建的项目想要使用scss 在建立项目的时候我已经选择了scss
在main.js中引入了scss文件，样式初始化成功，但是我在我的组件样式中使用设置的变量却报了错。看了好多博客都没用，又安装了node-sass各种报错。最后是看我之前的项目中scss是如何使用的，根本没用到node-sass，就修改好了。

1. 安装依赖
   

2. src目录下新建styles目录
   
   variables.scss存储需要使用的变量
   resets.scss存储初始化样式

3. vue.config.js中的配置

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // 8版本用prependData:
        prependData: `
          @import "./src/styles/variables.scss";  // scss文件地址
          @import "./src/styles/resets.scss";     // scss文件地址
        `
      }
    }
  },

}

因为我想要在组件任何样式中都可以使用变量，如：

main.js中导入variables.scss

import '@/styles/variables.scss'

至此就成功了