vue-less与vue-sass

1. less 和 sass 的不同以及使用场景？

• Less是基于javascript,在客户端处理，适合开发时候使用
• Sass是基于ruby, 在服务端处理。

npm i node-sass@4.14.1
npm i sass-loader@7.3.1 --save-dev

image.png

2. 如何安装并使用sass

• npm i sass
• npm i node-sass@4.14.1 // 安装
• npm i -D sass-loader@8.x // 安装

报错问题：

image.png

• npm uninstall --save sass-loader // 卸载
• npm i -D sass-loader@8.x // 安装
• npm uninstall --save node-sass // 卸载
• npm i node-sass@4.14.1 // 安装

// 如果node-sass安装失败，也可以直接在package.json中写上版本号，删除node_modules文件夹，重新 npm i 即可

指定版本号安装： npm sass-loader@7.3.1 node-sass --save-dev

3. 安装less 报错：

Syntax Error: TypeError: this.getOptions is not a function less-loader版本问题
解决步骤：

1. 卸载现在版本的

npm uninstall --save less-loader

2. 安装7.3.0版本的

npm install less-loader@7.3.0 -D

3. 如何安装less 并使用?

1.npm i less
2.npm install less-loader
3.<style lang="less" scoped>

4. 使用less中的全局变量

1. 安装style-resources-loader

npm i style-resources-loader -D
npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-dev

2. 如果没有 vue.config.js 文件就新建一个文件
   在文件中写入 如下代码

const path = require('path')
module.exports = {
  pluginOptions: { // 第三方插件配置
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, './src/styles/variables.less')] // less所在文件路径
    }
  }
}

注意： 如果报错 关闭vscode 重新启动