vuecli 5，vue2项目使用 webpack 工具对 scss less 样式进行预处理

VueCLI 5 中，默认使用了 webpack 5 作为构建工具，可以通过配置 webpack 配置文件实现对 scss 和 less 样式的预处理。

首先需要安装对应的 loader：

npm install sass-loader sass webpack --save-dev

npm install less-loader less webpack --save-dev

然后在 webpack 配置文件中添加对应的 loader：

module.exports = {
  module: {
    rules: [
      // 配置处理 scss 文件
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      // 配置处理 less 文件
      {
        test: /\.less$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
}

在 Vue 组件中使用 scss 或 less 样式：

<template>
  <div class="example-class"></div>
</template>

<style lang="scss">
.example-class {
  color: #fff;
  background-color: #000;
}
</style>

<style lang="less">
.example-class {
  color: #fff;
  background-color: #000;
}
</style>

这样就可以在 Vue 2 项目中使用 scss 或 less 样式进行预处理了。