Vue - 项目中使用 scss

一. 安装使用scss

1. 安装 scss 和 scss-loader

npm install scss-loader scss --save

2. 安装 node-sass 和 sass-loader

限制 node-sass，sass-loader 版本号，防止默认安装的版本号过高
npm install [email protected] --save
npm install [email protected] --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 [email protected] --save

若还是报错：

1. 卸载已安装的 node-sass
   npm uninstall node-sass
2. 重新安装低版本的 node-sass
   npm install [email protected]