xineur / blog

7 stars 0 forks source link

vue-cli3全局引入less #7

Open xineur opened 5 years ago

xineur commented 5 years ago

1、安装 style-resources-loader

vue add style-resources-loader

2、配置全局less并引入

// vue.config.js
const { join } = require('path');

function resolve (path) {
  return join(__dirname, path)
}

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
    .set('@', resolve('/src'))
    .set('_c', resolve('/src/components'))
    .set('_v', resolve('/src/views'))
    .set('_a', resolve('/src/api'))
    .set('_assets', resolve('/src/assets'))
  },
  // less 全局样式引入
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        './src/assets/less/index.less' // 全局less路劲
      ]
    }
  },
  devServer: {
    proxy: {
      "^/api": {
        target: "http://localhost:3000",
        changeOrigin: true, // 是否跨域
        ws: true, // websocket
        pathRewrite: { // 重写路径
          "^/api": ''
        }
      }
    }
  }
};

3、 重新启动