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

平凡方法

一、安装利用scss

1. 安装 scss

1. npm install scss --save

复制代码

2. 安装 node-sass 和 sass-loader
sass-loader：把 sass编译成css
node-sass：nodejs情况中将sass转css

1. 提示：限制 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 文件

1. 提示：在 build 文件夹目录下 webpack.base.conf.js 文件中，找到 rules 添加以下代码
4. rules: [
5.   {
6.     test: /.scss$/,
7.     loaders: ['style', 'css', 'sass']
8.   },
9. ]

复制代码

4. 组件中利用 scss

1. 提示：在组件中style标签上添加属性 lang="scss"，保存运行
4. <style lang="scss">
5. #app {
6.   background: $color;
7. }
8. </style>

复制代码

参考链接：https://blog.csdn.net/weixin_45665171/article/details/129830928
另辟蹊径的一个安装方法：

为什么会有这个安装方法，是由于我在利用通例安装方法时，会出现版本不兼容题目，导致安装失败，以是 实验了一个新的方法，如下
1.在 webpack.base.conf.js 文件中设置， 利用 sass 和 sass-loader

添加代码：

1.   {
2.         test: /.scss$/,
3.         use: [
4.           'style-loader',
5.           'css-loader',
6.           'sass-loader'
7.         ]
9.       }

复制代码

2.在这个设置中，你不须要指定 sass-loader 的版本，由于它会根据 npm 依靠项自动安装符合的版本。你只须要确保 package.json 中指定了所需的版本范围：

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

复制代码

然后运行 npm install 来安装依靠。项目就可以正常利用sass啦~

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。