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.1

npm i sass-loader@7 -D

npm 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'
        ]
      }
    ]
  },
  // 插件疏忽
}