Vue中Less设置全局变量

时间:2025-01-22 10:00:11

安装依赖

npm install less --save-dev
npm install sass-resources-loader --save-dev

build文件夹下修改如下

'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../')

 = function (_path) {
  const assetsSubDirectory = .NODE_ENV === 'production'
    ? 
    : 

  return (assetsSubDirectory, _path)
}

 = function (options) {
  options = options || {}

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: 
    }
  }

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: 
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders =  ? [cssLoader, postcssLoader] : [cssLoader]

    if (loader) {
      ({
        loader: loader + '-loader',
        options: ({}, loaderOptions, {
          sourceMap: 
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if () {
      return ({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

  // /en/configurations/
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less').concat({
      loader: 'sass-resources-loader',
      options: {
        resources: (__dirname, '../src/assets/')//这是全局变量文件的路径所有变量要放在这个文件中
      }
		}),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

// Generate loaders for standalone style files (outside of .vue)
 = function (options) {
  const output = []
  const loaders = (options)

  for (const extension in loaders) {
    const loader = loaders[extension]
    ({
      test: new RegExp('\\.' + extension + '$'),
      use: loader
    })
  }

  return output
}

 = () => {
  const notifier = require('node-notifier')

  return (severity, errors) => {
    if (severity !== 'error') return

    const error = errors[0]
    const filename =  && ('!').pop()

    ({
      title: ,
      message: severity + ': ' + ,
      subtitle: filename || '',
      icon: (__dirname, '')
    })
  }
}

如果报错执行如下命令

npm install stylus-loader css-loader style-loader less-loader --save-dev