Vue项目中使用全局less样式

项目中定义了公共样式@default-text-color: #848484;但是在组件中应用却一直报@default-text-color is undefined,如图：

解决方法如下：

1、安装less和less-loader

npm i less less-loader -D

2、要想全局使用还需使用一个插件( sass-resources-loader ),没有写错，就是sass

npm i sass-resources-loader -D

3.vue.config.js配置

const path = require('path')module.exports = {  publicPath: './',  outputDir: 'dist',  assetsDir: 'static',  lintOnSave: process.env.NODE_ENV === 'development',  productionSourceMap: false,  pluginOptions: {    'style-resources-loader': {      preProcessor: 'less',      patterns: [        path.resolve(__dirname, "src/styles/index.less")  // 引入全局样式变量      ]     }  },  configureWebpack: config => {  //build 去掉console    if (process.env.NODE_ENV === 'production') {      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true    }  },  devServer: {    proxy: {      '/api': { //接口请求        target: process.env.VUE_APP_BASE_URL,        // ws: true,        changeOrigin: true,        pathRewrite: {          '^/api': '/'        },      },    },  }}

运行npm run serve即可正常使用less变量

color: @default-text-color;