vue中使用全局css变量

1.简单粗暴型:直接在main.js(main.ts)中引入即可

import '@/css/main.less';

2.通过配置文件引入(修改配置文件请重启项目)

在vue.config.js文件中添加:

const path = require('path');
module.exports = {
  css: {
    modules: true,
    loaderOptions: {
      // 给 less-loader 传递选项
      less: {
        localIdentName: "'[name]__[local]-[hash:base64:5]'",
        camelCase: true,
      }
    }
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, 'src/css/main.less')], // css文件路径
    },
  },