Vue项目中 安装及使用Sass（scss）

普通方法

一、安装使用scss

1. 安装 scss

npm install scss --save

2. 安装 node-sass 和 sass-loader

sass-loader

：把 sass编译成css

node-sass

：nodejs环境中将sass转css

提示：限制 node-sass，sass-loader 版本号，防止默认安装的版本号过高

npm i sass-loader@7.3.1 -D
npm i node-sass@4.14.1 -D

版本对应关系：

3. 配置 webpack.base.conf.js 文件

提示：在 build 文件夹目录下 webpack.base.conf.js 文件中，找到 rules 添加以下代码

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

4. 组件中使用 scss

提示：在组件中style标签上添加属性 lang="scss"，保存运行

<style lang="scss">
#app{background: $color;}
</style>

参考链接：https://blog.csdn.net/weixin_45665171/article/details/129830928

另辟蹊径的一个安装方法：

为什么会有这个安装方法，是因为我在使用常规安装方法时，会出现版本不兼容问题，导致安装失败，所以 尝试了一个新的方法，如下

1.在

webpack.base.conf.js

文件中配置， 使用

sass 和 sass-loader

添加代码：

{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}

2.在这个配置中，你不需要指定

sass-loader

的版本，因为它会根据 npm 依赖项自动安装合适的版本。你只需要确保

package.json

中指定了所需的版本范围：

// package.json{"devDependencies":{"sass-loader":"^10.0.0",// 或者你需要的任何兼容版本"sass":"^1.26.0"// 对应 Dart Sass 的版本}}

然后运行

npm install

来安装依赖。项目就可以正常使用sass啦~