Vue 安装 scss (安装步骤/项目使用/报错解决)

一、使用命令安装

        1.1 安装sass-loader/node-sass(前者依赖于后者)。

                1.1.1 记点：sass-loader：把 sass编译成css, node-sass：nodejs环境中将sass转css。

                1.1.2 安装命令：

//默认安装最新版本
npm install node-sass --sava-dev
npm install sass-loader --save-dev

//指定安装版本
npm install node-sass@x.xx.x --sava-dev
npm install sass-loader@x.xx.x --save-dev

需要注意的：

        1.由于sass-loader是依赖与node-sass，建议按照顺序安装。

        2.各版本兼容问题，首先需要查看你的node.js 安装的是什么版本(node -v)。

         2.1 然后根据安装的node.js 来选择安装的 node-sass 版本

   由于我的 node.js 是14.19.1 的版本 ，所以我安装 node-sass 是用的 4.14.1版本。

   安装和 node-sass 版本对应的 sass-loader (我安装 node-sass 是用的 4.14.1版本所以 sass-           loader 安装的是7.3.1版本)。

        2.3 node-sass 与 sass-loader 的对应版本

//以下是部分版本号对应，具体可百度
sass-loader 4.1.1，node-sass 4.3.0
sass-loader 7.0.3，node-sass 4.7.2
sass-loader 7.3.1，node-sass 4.7.2
sass-loader 7.3.1，node-sass 4.14.1

 二、配置文件

        2.1 项目根目录下找到   build 文件夹下的 webpack/base/conf.js文件添加如下代码：

{
   test: /\.scss$/,

   loaders: ['style', 'css', 'sass']

},

三、在vue模板组件中引用

<style lang="scss" scoped>
...
</style>

 四、可能遇到的问题

        4.1：Module build failed: TypeError: this.getResolve is not a function

                sass-loader 版本太高。

        4.2：Syntax Error: Error: PostCSS received undefined instead of CSS string

                node-sass 和 sass-loader 版本与当前的不兼容。

         4.3：安装版本有错误的话，一定要卸载之后，再重新安装指定版本。

//卸载命令
npm uninstall node-sass
npm uninstall sass-loader

        4.3.1 ：命令卸载是最便捷的方法。还有另一种方法就是直接在根目录下的 package.json文件中找到node-sass / sass-loader ,直接修改成想要的版本，重新执行 npm install 命令（不建议）。