一. 安装使用scss

1. 安装 scss 和 scss-loader

npm install scss-loader scss --save

2. 安装 node-sass 和 sass-loader

限制 node-sass,sass-loader 版本号,防止默认安装的版本号过高
npm install sass-loader@7.3.1 --save
npm install node-sass@4.14.1 --save

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

build 文件夹目录下 webpack.base.conf.js 文件中,找到 rules 添加以下代码

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

在这里插入图片描述

4. 组件中使用 scss

style 标签中 加上 lang=“scss”
在这里插入图片描述

二. 安装使用 scss,发生报错

在这里插入图片描述
这是因为 安装 node-sass 和 sass-loader 时候没有限制版本号,导致安装的版本过高

解决方案:

  1. 卸载已安装的 sass-loader
    npm uninstall sass-loader
  2. 重新安装低版本的 sass-loader
    npm install sass-loader@7.3.1 --save

若还是报错:

  1. 卸载已安装的 node-sass
    npm uninstall node-sass
  2. 重新安装低版本的 node-sass
    npm install node-sass@4.14.1
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐