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