本篇文章主要记录了笔者安装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
再在其中写入
如图:
在这里插入图片描述

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

Logo

前往低代码交流专区

更多推荐