1.less

1.装置

1.如果没有装置less，请先装置less
npm i less-loader less --save-dev
2.如果须要定义全局变量，请装置
npm i style-resources-loader --save-dev
3.在我的项目根目录(src同级)创立vue.config.js并配置

const path = require('path')function resolve (dir) {return path.join(__dirname, dir)}module.exports = {pluginOptions: { //第三方插件配置'style-resources-loader': {preProcessor: 'less',patterns:[(, './src/assets/styles/vars.less')] //该地址为你的全局款式地址}}}

2.应用

// vars.less@my-bg-color: #f5f5f5;@my-theme-color: #F04846;// 页面.my-header{background: @my-theme-color;}

提醒：
如果，发现页面引入始终报错，说找不到或者不存在，或者定义有效，那么再去装置一下

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

失常状况下装置style-resources-loader时，vue-cli-plugin-style-resources-loader应该会一起装置了，不过有时候非凡起因导致vue-cli-plugin-style-resources-loader装置失败，所以会包这个错。装置完重启就能够用了。

2.scss

2.1 装置

npm i node-sass@4.14.1npm i sass-loader@7 -Dnpm i style-loader -D

2.2 vue.config.js

//vue-loader页面module.exports = {  module: {    rules: [      // ... 疏忽其它规定      // 一般的 `.scss` 文件和 `*.vue` 文件中的      // `<style lang="scss">` 块都利用它      {        test: /\.scss$/,        use: [          'vue-style-loader',          'css-loader',          'sass-loader'        ]      }    ]  },  // 插件疏忽}