@default-text-color: #848484; @default-text-color = “undefined”;

Solutions are as follows:

1. Install less and less-loader

npm i less less-loader -D
Copy the code

Sass-resources-loader (sass); sass resources-loader (sass

npm i sass-resources-loader -D
Copy the code

3. Vue. Config. Js configuration

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") // introduce global style variables]}}, configureWebpack: Config => {//build console if (process.env.node_env === 'production') { config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true } }, devServer: { proxy: { '/api': VUE_APP_BASE_URL, // ws: true, changeOrigin: true, pathRewrite: {'^/ API ': '/'},},},}}Copy the code

Run NPM run serve to use the less variable normally

color: @default-text-color;
Copy the code