vue3.0安装sass（scss）以及报错解决

本篇文章主要记录了笔者安装sass的过程

1.安装ruby

首先在官网中下载
https://rubyinstaller.org/downloads/

下载之后进行安装
在安装过程中，要记得勾选添加环境变量的选项，其他的就是一直next就可以了
安装完成之后可以在终端输入ruby -v 查看是否安装成功

2.安装sass（scss）

之后cd到项目的目录下
进行sass的安装

npm install sass-loader@7.3.1 --save-dev
npm install node-sass --save-dev
npm install style-loader --save-dev

上面指定版本号的原因是为了防止版本号过高出现报错

3.解决安装完成还是无法使用的问题

安装之后重新运行项目还是报错

解决方法：
在webpack.config.js文件中写入以下代码：

module.export = {
    module: {
        rules: [
            {
                test: /\.scss$/,
                loaders: ['style', 'css', 'sass']
            }
        ]
    }
}

因为是使用vue-cli创建的vue3.0项目，在目录中并没有webpack.config.js文件，因此
在根目录下，创建webpack.config.js
再在其中写入
如图：

之后重新运行项目，问题解决